Spaces:
Running
Running
David Ko
commited on
Commit
ยท
1fb1877
1
Parent(s):
9abf0c1
build(frontend): copy flattened CRA build to backend static (fix 404 for /static/js/*); translate UI to English
Browse files- static/openai-chat.html +14 -14
static/openai-chat.html
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html lang="
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
@@ -28,7 +28,7 @@
|
|
| 28 |
<div class="header">
|
| 29 |
<h1>OpenAI Chat</h1>
|
| 30 |
<div>
|
| 31 |
-
<a href="/index.html"
|
| 32 |
</div>
|
| 33 |
</div>
|
| 34 |
|
|
@@ -39,22 +39,22 @@
|
|
| 39 |
<input id="model" type="text" value="gpt-4o-mini" />
|
| 40 |
</div>
|
| 41 |
<div>
|
| 42 |
-
<label for="apiKey">OpenAI API Key (
|
| 43 |
-
<input id="apiKey" type="password" placeholder="sk-... (
|
| 44 |
</div>
|
| 45 |
</div>
|
| 46 |
-
<label for="system">System Prompt (
|
| 47 |
<input id="system" type="text" placeholder="You are a helpful assistant." />
|
| 48 |
-
<label for="prompt"
|
| 49 |
-
<textarea id="prompt" placeholder="
|
| 50 |
<div class="actions">
|
| 51 |
-
<button id="sendBtn"
|
| 52 |
-
<button class="secondary" id="clearBtn"
|
| 53 |
</div>
|
| 54 |
</div>
|
| 55 |
|
| 56 |
<div class="card">
|
| 57 |
-
<div class="muted"
|
| 58 |
<div id="response" class="log"></div>
|
| 59 |
</div>
|
| 60 |
</div>
|
|
@@ -65,7 +65,7 @@
|
|
| 65 |
|
| 66 |
function setLoading(on) {
|
| 67 |
$('sendBtn').disabled = on;
|
| 68 |
-
$('sendBtn').textContent = on ? '
|
| 69 |
}
|
| 70 |
|
| 71 |
$('clearBtn').addEventListener('click', () => {
|
|
@@ -80,7 +80,7 @@
|
|
| 80 |
const system = $('system').value.trim();
|
| 81 |
|
| 82 |
if (!prompt) {
|
| 83 |
-
alert('
|
| 84 |
return;
|
| 85 |
}
|
| 86 |
|
|
@@ -104,9 +104,9 @@
|
|
| 104 |
const data = await res.json();
|
| 105 |
const { response, model: usedModel, usage, latency_sec } = data;
|
| 106 |
const meta = `Model: ${usedModel} | Latency: ${latency_sec}s` + (usage ? ` | Usage: ${JSON.stringify(usage)}` : '');
|
| 107 |
-
responseEl.textContent = response ? (response + '\n\n---\n' + meta) : '(
|
| 108 |
} catch (e) {
|
| 109 |
-
responseEl.textContent = '
|
| 110 |
} finally {
|
| 111 |
setLoading(false);
|
| 112 |
}
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8" />
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
| 28 |
<div class="header">
|
| 29 |
<h1>OpenAI Chat</h1>
|
| 30 |
<div>
|
| 31 |
+
<a href="/index.html">Home</a>
|
| 32 |
</div>
|
| 33 |
</div>
|
| 34 |
|
|
|
|
| 39 |
<input id="model" type="text" value="gpt-4o-mini" />
|
| 40 |
</div>
|
| 41 |
<div>
|
| 42 |
+
<label for="apiKey">OpenAI API Key (optional)</label>
|
| 43 |
+
<input id="apiKey" type="password" placeholder="sk-... (OPENAI_API_KEY env var supported)" />
|
| 44 |
</div>
|
| 45 |
</div>
|
| 46 |
+
<label for="system">System Prompt (optional)</label>
|
| 47 |
<input id="system" type="text" placeholder="You are a helpful assistant." />
|
| 48 |
+
<label for="prompt">User Question</label>
|
| 49 |
+
<textarea id="prompt" placeholder="Type your question here"></textarea>
|
| 50 |
<div class="actions">
|
| 51 |
+
<button id="sendBtn">Send Question</button>
|
| 52 |
+
<button class="secondary" id="clearBtn">Clear</button>
|
| 53 |
</div>
|
| 54 |
</div>
|
| 55 |
|
| 56 |
<div class="card">
|
| 57 |
+
<div class="muted">Response</div>
|
| 58 |
<div id="response" class="log"></div>
|
| 59 |
</div>
|
| 60 |
</div>
|
|
|
|
| 65 |
|
| 66 |
function setLoading(on) {
|
| 67 |
$('sendBtn').disabled = on;
|
| 68 |
+
$('sendBtn').textContent = on ? 'Sending...' : 'Send Question';
|
| 69 |
}
|
| 70 |
|
| 71 |
$('clearBtn').addEventListener('click', () => {
|
|
|
|
| 80 |
const system = $('system').value.trim();
|
| 81 |
|
| 82 |
if (!prompt) {
|
| 83 |
+
alert('Please enter a question.');
|
| 84 |
return;
|
| 85 |
}
|
| 86 |
|
|
|
|
| 104 |
const data = await res.json();
|
| 105 |
const { response, model: usedModel, usage, latency_sec } = data;
|
| 106 |
const meta = `Model: ${usedModel} | Latency: ${latency_sec}s` + (usage ? ` | Usage: ${JSON.stringify(usage)}` : '');
|
| 107 |
+
responseEl.textContent = response ? (response + '\n\n---\n' + meta) : '(Empty response)\n' + meta;
|
| 108 |
} catch (e) {
|
| 109 |
+
responseEl.textContent = 'Error: ' + e.message;
|
| 110 |
} finally {
|
| 111 |
setLoading(false);
|
| 112 |
}
|