TradingGameAI / ui_html.py
j-js's picture
Create ui_html.py
5d2360a verified
HOME_HTML = """
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>GMAT Solver v3</title>
<style>
body { font-family: Arial, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 16px; }
textarea { width: 100%; min-height: 220px; padding: 12px; font-size: 16px; }
.row { display: flex; gap: 16px; margin: 12px 0; flex-wrap: wrap; }
.card { border: 1px solid #ddd; border-radius: 10px; padding: 12px; flex: 1 1 220px; }
button { padding: 10px 16px; font-size: 16px; cursor: pointer; }
pre { white-space: pre-wrap; background: #f7f7f7; padding: 16px; border-radius: 10px; }
label { display: block; margin-bottom: 8px; font-weight: bold; }
select, input[type="range"] { width: 100%; }
</style>
</head>
<body>
<h1>GMAT Solver v3</h1>
<p>This version supports natural chat and hidden Unity context.</p>
<label for="message">Message</label>
<textarea id="message" placeholder="Try:
why is it c
Or paste a whole question."></textarea>
<div class="row">
<div class="card">
<label for="help_mode">Help mode</label>
<select id="help_mode">
<option value="answer" selected>answer</option>
<option value="hint">hint</option>
<option value="walkthrough">walkthrough</option>
</select>
</div>
<div class="card">
<label for="tone">Tone</label>
<input id="tone" type="range" min="0" max="1" step="0.01" value="0.5">
</div>
<div class="card">
<label for="verbosity">Verbosity</label>
<input id="verbosity" type="range" min="0" max="1" step="0.01" value="0.5">
</div>
<div class="card">
<label for="transparency">Transparency</label>
<input id="transparency" type="range" min="0" max="1" step="0.01" value="0.5">
</div>
</div>
<button onclick="send()">Send</button>
<h2>Response</h2>
<pre id="out">Waiting...</pre>
<script>
async function send() {
const payload = {
message: document.getElementById('message').value,
help_mode: document.getElementById('help_mode').value,
tone: parseFloat(document.getElementById('tone').value),
verbosity: parseFloat(document.getElementById('verbosity').value),
transparency: parseFloat(document.getElementById('transparency').value)
};
const res = await fetch('/chat', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(payload)
});
const data = await res.json();
document.getElementById('out').textContent = JSON.stringify(data, null, 2);
}
</script>
</body>
</html>
"""