wehub-resource-sync
212 lines
8.1 KiB
HTML
212 lines
8.1 KiB
HTML
{% extends 'base.html' %}
|
|
|
|
{% block css_imports %}
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/styles/stackoverflow-dark.min.css" />
|
|
<link
|
|
rel="stylesheet"
|
|
href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />
|
|
{% endblock %}
|
|
|
|
{% block title %}Vertex AI Search Demo - {{title}}{% endblock %}
|
|
{% block description %}
|
|
Search the
|
|
<a href="https://shop.googlemerchandisestore.com/">Google Merchandise Store</a> by providing a text query,
|
|
an image URL, or image file to find similar matches.
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<form
|
|
class="search-form"
|
|
action="/imagesearch_vais"
|
|
method="post"
|
|
enctype="multipart/form-data">
|
|
<!-- Search Box -->
|
|
<div class="mdc-text-field mdc-text-field--outlined query-field">
|
|
<input class="mdc-text-field__input" id="query-input" name="search_query" />
|
|
<div class="mdc-notched-outline">
|
|
<div class="mdc-notched-outline__leading"></div>
|
|
<div class="mdc-notched-outline__notch">
|
|
<label for="query-input" class="mdc-floating-label">Search by Text Query or Image URL</label>
|
|
</div>
|
|
<div class="mdc-notched-outline__trailing"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Image Box -->
|
|
<div class="file-upload">
|
|
<label id="file-upload-label" class="file-upload-label" for="image-input">
|
|
<span class="file-upload-icon material-icons">cloud_upload</span>
|
|
Upload Image
|
|
</label>
|
|
<input
|
|
id="image-input"
|
|
class="file-upload__input"
|
|
name="image"
|
|
type="file"
|
|
accept="image/jpeg, image/png, image/bmp" />
|
|
</div>
|
|
<!-- Search Button -->
|
|
<div class="button-container">
|
|
<button
|
|
type="submit"
|
|
class="search-button mdc-button mdc-button--outlined mdc-button--icon-leading">
|
|
<span class="mdc-button__ripple"></span>
|
|
<i class="material-icons mdc-button__icon" aria-hidden="true">search</i>
|
|
<span class="mdc-button__label">Search</span>
|
|
</button>
|
|
</div>
|
|
</form>
|
|
{% if not message_success %}
|
|
<div class="mdc-layout-grid">
|
|
<div class="mdc-layout-grid__inner">
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3"></div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
|
|
<p class="sample-image-text">Here are some sample images to try:</p>
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3"></div>
|
|
</div>
|
|
<div class="mdc-layout-grid__inner">
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3"></div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
|
|
<img src="{{url_for('static', filename='blue_pack.jpeg')}}" alt="Blue Pack" width="150">
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
|
|
<img src="{{url_for('static', filename='lego_cloud.png')}}" alt="Lego Cloud" width="150">
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2">
|
|
<img src="{{url_for('static', filename='socks.jpg')}}" alt="Purple Socks" width="150">
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if message_error %}
|
|
<div class="mdc-layout-grid">
|
|
<div class="mdc-layout-grid__inner">
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3"></div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
|
|
<pre>{{message_error}}</pre>
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-3"></div>
|
|
</div>
|
|
</div>
|
|
{% elif message_success %}
|
|
<div class="mdc-tab-bar" role="tablist">
|
|
<div class="mdc-tab-scroller">
|
|
<div class="mdc-tab-scroller__scroll-area">
|
|
<div class="mdc-tab-scroller__scroll-content">
|
|
<button
|
|
id="entities-tab-selector"
|
|
class="mdc-tab mdc-tab--active"
|
|
role="tab"
|
|
aria-selected="true"
|
|
tabindex="0">
|
|
<span class="mdc-tab__content">
|
|
<span class="mdc-tab__icon material-icons" aria-hidden="true">dataset</span>
|
|
<span class="mdc-tab__text-label">Results</span>
|
|
</span>
|
|
<span class="mdc-tab-indicator mdc-tab-indicator--active">
|
|
<span
|
|
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
|
|
</span>
|
|
<span class="mdc-tab__ripple"></span>
|
|
</button>
|
|
<button id="json-tab-selector" class="mdc-tab mdc-tab" role="tab" tabindex="1">
|
|
<span class="mdc-tab__content">
|
|
<span class="mdc-tab__icon material-icons" aria-hidden="true">code</span>
|
|
<span class="mdc-tab__text-label">JSON</span>
|
|
</span>
|
|
<span class="mdc-tab-indicator">
|
|
<span
|
|
class="mdc-tab-indicator__content mdc-tab-indicator__content--underline"></span>
|
|
</span>
|
|
<span class="mdc-tab__ripple"></span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="tab-content">
|
|
<div id="entities-tab" class="tab-visible">
|
|
{% if results|length == 0 %}
|
|
<div>No results</div>
|
|
{% endif %} {% for result in results %}
|
|
<div class="mdc-layout-grid">
|
|
<div class="mdc-layout-grid__inner">
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
|
|
<div class="mdc-card mdc-card--outlined">
|
|
<div
|
|
class="mdc-card__primary-action entity-primary-action image-result"
|
|
tabindex="0">
|
|
{% set imageUrl = result["thumbnailImage"] %} {% set imageFullSize =
|
|
result["link"] %}
|
|
<a
|
|
href="{{imageFullSize}}"
|
|
class="mdc-card__media mdc-card__media--square entity-image"
|
|
style="background-image: url('{{imageUrl}}');"></a>
|
|
<div class="entity-card-primary">
|
|
<h2 class="mdc-typography mdc-typography--headline6">{{result["title"]}}</h2>
|
|
<h3 class="mdc-typography mdc-typography--subtitle2">
|
|
{% set resultUrl = result["htmlFormattedUrl"] %} URL:
|
|
<a href="{{resultUrl}}" target="_blank" rel="noopener noreferrer"
|
|
>{{result["displayLink"]|safe}}</a
|
|
>
|
|
</h3>
|
|
</div>
|
|
{% for snippet in result["snippets"] %}
|
|
<div class="mdc-typography mdc-typography--body2 entity-detailed-description">
|
|
{{snippet|safe}}
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
|
|
<div class="mdc-card mdc-card--outlined">
|
|
<pre><code class="language-json" lang="json">{{result["resultJson"]}}</code></pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
<div id="json-tab" class="tab-hidden">
|
|
{% if request_url %}
|
|
<div class="mdc-layout-grid">
|
|
<div class="mdc-layout-grid__inner">
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2"></div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-8">
|
|
<b>Request URL:</b>
|
|
<pre><code class="language-shell" lang="shell">{{request_url}}</code></pre>
|
|
</div>
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-2"></div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
<div class="mdc-layout-grid">
|
|
<div class="mdc-layout-grid__inner">
|
|
{% if raw_request %}
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
|
|
<b>Request Body:</b>
|
|
<pre><code class="language-json" lang="json">{{raw_request}}</code></pre>
|
|
</div>
|
|
{% endif %} {% if raw_response %}
|
|
<div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-6">
|
|
<b>Response Body:</b>
|
|
<pre><code class="language-json" lang="json">{{raw_response}}</code></pre>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% endblock %}
|
|
|
|
{% block js_imports %}
|
|
<script src="https://unpkg.com/@highlightjs/cdn-assets@11.7.0/highlight.min.js"></script>
|
|
<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
|
|
<script src="{{url_for('static', filename='search.js')}}"></script>
|
|
{% endblock %}
|