Skip to content
Permalink
Browse files

DEMO - constraining space of viewable images

  • Loading branch information...
alexklibisz committed May 22, 2018
1 parent 1abe8be commit 878b86f1b26e64f1fb1370ada4dbe334df9b3aca
Showing with 66 additions and 54 deletions.
  1. +51 −25 demo/webapp/app.py
  2. +15 −29 demo/webapp/templates/index.html
@@ -7,6 +7,7 @@
from itertools import cycle
from pprint import pprint
import os
import random
import requests

# Get elasticsearch hosts from environment variable.
@@ -15,7 +16,7 @@
ESHOSTS = cycle(os.environ["ESHOSTS"].split(","))

# Define a set of images to cycle through for the /demo endpoint.
DEMO_IDS = cycle([
DEMO_IDS = [
"988221425063530502", # Mountain scenery
"990013386929917953", # Car
"991780208138055681", # Screenshot
@@ -31,7 +32,34 @@
"989836022384156672", # Mountain scenery
"990578938505146368", # Race cars
"988526279665205248", # Store fronts
])
"989477367486672896",
"988531509954011139",
"990159780726665216",
"990678809081823232",
"992379356071825410",
"988788327217119233",
"989065251919458304",
"989617448843403264",
"990863324890869760",
"989664366319484928",
"989951906809344001",
"988674636417249281",
"988426706888216576",
"991450758120902656",
"990226717607415808",
"988902080923529217",
"990372146735087616",
"989678396274814976",
"988867339516022784",
"990713839892119552",
"992056122050662400",
"989161016280875008",
"990594050557231104",
"992186954941980673",
"988825283204558848",
"989350699472490497",
"990430615324450816"
]

app = Flask(__name__)

@@ -49,29 +77,28 @@ def demo():
@app.route("/<es_index>/<es_type>/<es_id>")
def images(es_index, es_type, es_id):

# Fetch 10 random images for bottom carousel.
body = {
"_source": ["s3_url"],
"size": 20,
"query": {
"function_score": {
"query": {"match_all": {}},
"boost": 5,
"random_score": {},
"boost_mode": "multiply"


# Parse elasticsearch ID. If "demo", pick a random demo image ID.
if es_id.lower() == "demo":
es_id = random.choice(DEMO_IDS)

elif es_id.lower() == "random":
body = {
"_source": ["s3_url"],
"size": 1,
"query": {
"function_score": {
"query": {"match_all": {}},
"boost": 5,
"random_score": {},
"boost_mode": "multiply"
}
}
}
}
req_url = "%s/%s/%s/_search" % (next(ESHOSTS), es_index, es_type)
req = requests.get(req_url, json=body)
random_imgs = req.json()["hits"]["hits"]

# Parse elasticsearch ID. If "random", pick one of the random images
# that were returned. If "demo", pick the next demo image ID.
if es_id.lower() == "random":
es_id = random_imgs[0]["_id"]
elif es_id.lower() == "demo":
es_id = next(DEMO_IDS)
req_url = "%s/%s/%s/_search" % (next(ESHOSTS), es_index, es_type)
req = requests.get(req_url, json=body)
es_id = req.json()["hits"]["hits"][0]["_id"]

# Get number of docs in corpus.
req_url = "%s/%s/%s/_count" % (next(ESHOSTS), es_index, es_type)
@@ -95,5 +122,4 @@ def images(es_index, es_type, es_id):
took_ms=took_ms,
count=count,
query_img=query_img,
neighbor_imgs=neighbor_imgs,
random_imgs=random_imgs)
neighbor_imgs=neighbor_imgs)
@@ -25,13 +25,6 @@
height:180px;
}
#random_imgs img {
object-fit: cover;
width:30px;
height:30px;
padding:1px;
}
</style>

</head>
@@ -54,8 +47,8 @@ <h1>Twitter Image Similarity Search</h1>
<div class="col-lg-12">
<hr>
<h3>Searched <span class="badge badge-primary">{{count}} images</span> in
<span class="badge badge-primary">{{took_ms}} milliseconds</span></h3>
<hr>
<span class="badge badge-primary">{{took_ms}} milliseconds.</span></h3>
<hr>
</div>
</div>
</div>
@@ -71,35 +64,28 @@ <h3>Query Image</h3>
</div>
</div>
<div class="col-lg-6">
<h3>Nearest Neighbors</h3>
<small>Click an image to retrieve its nearest neighbors</small>
<h3>Most Visually Similar Nearest Neighbors</h3>
<p>Click an image to view its original tweet.</p>
<hr>
<div class="row" id="neighbor_imgs">
{% for img in neighbor_imgs %}
<div class="col-lg-4">
<a href='/{{es_index}}/{{es_type}}/{{img["_id"]}}'>
<img src='{{img["_source"]["s3_url"]}}'/>
</a>
<a href='{{img["_source"]["twitter_url"]}}' target="_blank">
<img src='{{img["_source"]["s3_url"]}}'/>
</a>
</div>
{% endfor %}
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<hr>
<p>Random sample of images from the index. <a href="/{{es_index}}/{{es_type}}/random">Show me another random image!</a></p>
<div id="random_imgs">
{% for img in random_imgs %}
<a href='/{{es_index}}/{{es_type}}/{{img["_id"]}}'>
<img src='{{img["_source"]["s3_url"]}}'/>
</a>
{% endfor %}
</div>
</div>
</div>

<div class="row">
<div class="col-lg-12">
<hr>
<center>
<a class="btn btn-primary btn-lg" href="/{{es_index}}/{{es_type}}/demo">View another demo image</a>
</center>
</div>
</div>
</div>

</body>

0 comments on commit 878b86f

Please sign in to comment.
You can’t perform that action at this time.