llm_demo/templates/index.html (102 lines of code) (raw):
<!--
Copyright 2023 Google LLC
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
https://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Assistant</title>
<link rel="shortcut icon" type="image/jpg" href="/static/favicon.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"
rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Symbols+Outlined" rel="stylesheet">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<link rel="stylesheet" href="static/index.css">
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<div class="container">
<div class="chat-header">
<img class="header-logo" src="static/logo-header.png">
<span class="material-symbols-outlined" id="resetButton">refresh</span>
</div>
<div id="g_id_onload"
data-context="signin"
data-ux_mode="popup"
data-auto_prompt="false">
{% if user_img %}
<div class="chat-user-state">
<img id="chatuserImg" class="chat-user-image" src="{{ user_img }}" alt="user image"/>
<div class="popup-signout">
<a type="button" class="btn btn-default chat-signout-btn" id="signoutButton">Sign out</a>
</div>
</div>
{% else %}
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="signin"
data-size="medium"
data-logo_alignment="left">
</div>
{% endif %}
</div>
<div class="chat-wrapper">
<div class="chat-content">
<div class="inner-content">
{# Add Chat history #}
{% if messages %}
{% for message in messages %}
<div class="chat-bubble {{ message["type"] }}">
{% if message["type"] == "ai" %}
<div class="sender-icon">
<img src="static/logo.png">
</div>
{% elif message["type"] == "human" and user_img %}
<div class="sender-icon">
<img class="chat-user-image" src="{{ user_img }}" alt="user image"/>
</div>
{% else %}
{% endif %}
<span>{{ message["data"]["content"] | safe }}</span>
</div>
{% endfor %}
{% endif %}
</div>
<div id="loader-container" style="display:none;" class="chat-bubble ai">
<div class="sender-icon"><img src="static/logo.png"></div>
<span>
<div class="loader"></div>
</span>
</div>
</div>
</div>
<div class="chat-bar-wrapper">
<div class="chat-bar">
<div class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>
<div class="chat-input-container">
<input type="text" class="ip-msg" placeholder="type your question here...">
<span class="btn-group send-button">
<span class="material-symbols-outlined">
send
</span>
</span>
</div>
</div>
</div>
</div>
<div style="display:none;" id="user-name">{{ user_name }}</div>
</body>
<script
src="https://code.jquery.com/jquery-3.7.1.slim.min.js"
integrity="sha256-kmHvs0B+OpCW5GVHUNjv9rOmY0IvSIRcf7zGUDTDQM8="
crossorigin="anonymous"></script>
<script type="module" src="static/index.js"></script>
<script>
document.getElementById('g_id_onload').setAttribute('data-client_id', '{{ client_id }}');
var currentUrl = window.location.href;
var loginUri = currentUrl.split('?')[0] + 'login/google';
document.getElementById('g_id_onload').setAttribute('data-login_uri', loginUri);
</script>
</html>