Skip to content

Commit daf92a6

Browse files
manekinekkomanekinekko
committed
chore: update UX
1 parent 6824222 commit daf92a6

File tree

5 files changed

+233
-79
lines changed

5 files changed

+233
-79
lines changed

‎README.md

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -94,12 +94,6 @@ Note that the documents are uploaded automatically when deploying the sample to
9494
- **Azure account**. If you're new to Azure, [get an Azure account for free](https://azure.microsoft.com/free) to get free Azure credits to get started. If you're a student, you can also get free credits with [Azure for Students](https://aka.ms/azureforstudents).
9595
- **Azure subscription with access enabled for the Azure OpenAI service**. You can request access with [this form](https://aka.ms/oaiapply).
9696

97-
### Setup and configure Microsoft Entra ID
98-
99-
This sample is using Microsoft Entra ID for authentication. To set up Microsoft Entra ID, follow these steps:
100-
101-
TODO
102-
10397
#### Deploy the sample
10498

10599
1. Open a terminal and navigate to the root of the project.

‎package-lock.json

Lines changed: 0 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/index.html

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<link rel="icon" type="image/png" href="/favicon.png" />
7-
<title>Azure OpenAI Assistant</title>
8-
<link rel="stylesheet" href="style.css" />
9-
</head>
10-
<body>
11-
<header><h1>Azure OpenAI / Finance Assistant</h1></header>
12-
<main>
13-
<section class="input__container">
14-
<label class="input">
15-
<textarea
16-
id="userQueryRef"
17-
class="input__field"
18-
placeholder="Hi htere..."
19-
></textarea>
20-
<span class="input__label">User message</span>
21-
</label>
22-
<button id="submitQueryRef">Run</button>
23-
</section>
24-
<p class="text__hint">
25-
Your Assistant can make mistakes. Consider checking important
26-
information. All financial data mentioned below is fictitious!
27-
</p>
28-
<section class="output__container">
29-
<div id="outputRef" class="hidden"></div>
30-
</section>
31-
</main>
32-
<script type="module" src="script.js"></script>
33-
</body>
34-
</html>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="icon" type="image/png" href="/favicon.png" />
8+
<title>Azure OpenAI Assistant</title>
9+
<link rel="stylesheet" href="style.css" />
10+
</head>
11+
12+
<body>
13+
<header>
14+
<h1>Azure OpenAI / Finance Assistant Demo</h1>
15+
</header>
16+
<main>
17+
<section class="input__container">
18+
<label class="input">
19+
<textarea id="userQueryRef" class="input__field" placeholder="Hi htere..." cols="10" rows="10"></textarea>
20+
<span class="input__label">User message</span>
21+
</label>
22+
<button id="submitQueryRef">Run</button>
23+
<button id="cancelQueryRef" class="hidden">Cancel</button>
24+
</section>
25+
<p class="text__hint">
26+
Your Assistant can make mistakes. Consider checking important
27+
information. All financial and stock data mentioned below is fictitious!
28+
</p>
29+
<section class="output__container">
30+
<div id="loadingRef" class="loader__container hidden">
31+
<span class="spinner"><span class="spinner__tail"></span></span>
32+
Your Assistant is thinking ...
33+
</div>
34+
<div id="outputRef" class="hidden"></div>
35+
</section>
36+
</main>
37+
<script type="module" src="script.js"></script>
38+
</body>
39+
40+
</html>

‎src/script.js

Lines changed: 58 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,68 @@
1+
let aborter = new AbortController();
2+
3+
const outputRef = document.querySelector("#outputRef");
4+
const loadingRef = document.querySelector("#loadingRef");
5+
const userQueryRef = document.querySelector("#userQueryRef");
6+
const cancelQueryRef = document.querySelector("#cancelQueryRef");
7+
const submitQueryRef = document.querySelector("#submitQueryRef");
8+
9+
userQueryRef.value =
10+
"Based on the latest financial and current stock market value, can you generate a brief summary that provides insights into the current state of Microsoft? Retrieve the latest closing price of a stock using its ticker symbol.";
11+
12+
cancelQueryRef.addEventListener("click", () => {
13+
aborter.abort();
14+
aborter = new AbortController();
15+
cancelQueryRef.classList.add("hidden");
16+
submitQueryRef.classList.remove("hidden");
17+
loadingRef.classList.add("hidden");
18+
});
19+
20+
submitQueryRef
21+
.addEventListener("click", async (event) => {
22+
const { value } = userQueryRef;
23+
if (value) {
24+
25+
loadingRef.classList.remove("hidden");
26+
outputRef.classList.add("hidden");
27+
cancelQueryRef.classList.remove("hidden");
28+
submitQueryRef.classList.add("hidden");
29+
30+
const stream = await submitQuery(value);
31+
loadingRef.classList.add("hidden");
32+
33+
outputRef.innerHTML = "";
34+
outputRef.classList.remove("hidden");
35+
36+
for await (const chunk of stream) {
37+
if (aborter.signal.aborted) throw signal.reason;
38+
insertText(chunk)();
39+
}
40+
41+
cancelQueryRef.classList.add("hidden");
42+
submitQueryRef.classList.remove("hidden");
43+
loadingRef.classList.add("hidden");
44+
45+
if (outputRef.innerHTML === "") {
46+
outputRef.innerHTML = "Your Assistant could not fetch data. Please try again!"
47+
}
48+
}
49+
});
50+
51+
const insertText = chunk => () => {
52+
const delta = new TextDecoder().decode(chunk);
53+
outputRef.innerHTML += delta;
54+
outputRef.scrollTop = outputRef.scrollHeight; // scroll to bottom
55+
};
56+
57+
158
async function submitQuery(userQuery) {
259

360
const { API_URL = 'http://localhost:7071' } = import.meta.env;
461

562
const response = await fetch(`${API_URL}/api/assistant`, {
663
method: "POST",
764
body: userQuery,
65+
signal: aborter.signal
866
});
967

1068
if (!response.ok) {
@@ -13,28 +71,3 @@ async function submitQuery(userQuery) {
1371

1472
return response.body;
1573
}
16-
17-
(async function () {
18-
const outputRef = document.querySelector("#outputRef");
19-
const userQueryRef = document.querySelector("#userQueryRef");
20-
21-
userQueryRef.value =
22-
"Based on the latest financial and current stock market value, can you generate a brief summary that provides insights into the current state of Microsoft? Retrieve the latest closing price of a stock using its ticker symbol.";
23-
24-
document
25-
.querySelector("#submitQueryRef")
26-
.addEventListener("click", async (event) => {
27-
const { value } = userQueryRef;
28-
if (value) {
29-
outputRef.classList.remove("hidden");
30-
outputRef.innerHTML = "Your Financial Assistant is thinking...";
31-
const stream = await submitQuery(value);
32-
outputRef.innerHTML = "";
33-
for await (const chunk of stream) {
34-
const delta = new TextDecoder().decode(chunk);
35-
outputRef.innerHTML += delta;
36-
outputRef.scrollTop = outputRef.scrollHeight; // scroll to bottom
37-
}
38-
}
39-
});
40-
})();

0 commit comments

Comments
 (0)