cloud-run-gemini-chat/Application/CloudRun/Python-Flask/templates/index.html (102 lines of code) (raw):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Gemini AI</title>
<!-- Use Bootstrap for our CSS styles, see https://getbootstrap.com/docs/5.3/getting-started/introduction/ -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
rel="stylesheet"
crossorigin="anonymous"
/>
<script>
function onClearForm() {
document.querySelector('#topic').value = '';
document.querySelector('#output').innerHTML = '';
document.querySelector('#topic-badge').innerText = '';
}
</script>
</head>
<body>
<main class="container">
{% include 'nav.html' %}
<!-- Split this part of the page in half, form on left, output on right-->
<div class="container">
<header class="row mb-3 border-bottom">
<h1 class="mt-4">What would you like to know?</h1>
<p>
This AI model's knowledge cutoff is April 2023.
</p>
<p>
<em>Enter a question for Artificial Intelligence to answer.</em>
</p>
</header>
<!-- Split the remaining space in half: left for question form, right for AI output -->
<div class="row">
<section id="input" class="col">
<form action="#" method="post" id="input-form">
<div class="mb-3">
<label
for="question"
class="form-label w-100 d-flex justify-content-between"
>
Question
<span class="badge text-bg-light" id="topic-badge"></span>
</label>
<textarea
class="form-control"
id="topic"
name="topic"
rows="10"
maxlength="1000"
placeholder="Enter your question here"
autofocus
></textarea>
</div>
<label
for="model"
class="form-label w-100 d-flex justify-content-between"
>
Model
</label>
<select name="Model" id="model">
<option value="gemini_1_0_pro_latest">Gemini 1.0 Pro Latest</option>
<option value="gemini_1_0_ultra_latest">Gemini 1.0 Ultra Latest</option>
<option value="gemini_1_5_pro_latest">Gemini 1.5 Pro Latest</option>
</select>
<br />
<br />
<div class="text-end">
<button type="button" class="btn btn-warning" onmousedown="onClearForm()">Clear</button>
<button type="submit" class="btn btn-primary">
<!-- Spinner Icon -->
<span
class="submit-button-spinner spinner-border spinner-border-sm"
hidden
role="status"
aria-hidden="true"
></span>
<span class="submit-button-text">Submit</span>
</button>
</div>
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>
</form>
</section>
<section class="col">
<label
for="topic"
class="form-label w-100 d-flex justify-content-between"
>
Answer
</label>
<div id="output">
</div>
</section>
</div>
{% include 'footer.html' %}
</div>
</main>
<!-- Include Bootstrap's code and our own app.js -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
crossorigin="anonymous"
></script>
<script src="./app.js" type="module"></script>
</body>
</html>