|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8"> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
<title>Fine-tune Data CRYSTAL</title> |
|
<link rel="stylesheet" href="{{url_for('static',filename='style.css')}}"> |
|
</head> |
|
|
|
<body> |
|
<h1>FINETUNE CRYSTAL</h1> |
|
<form action="/record" method="post"> |
|
<div class="main"> |
|
<div class="entries"> |
|
<div class="all-inputs"> |
|
<textarea class="entry" name="notes" id="notes" placeholder="Enter Additional Notes Here:" oninput="updatePreview()">Notes- </textarea> |
|
<textarea class="entry" name="input" id="input" placeholder="Enter Input Here:" oninput="updatePreview()"></textarea> |
|
<div class="other-fields"> |
|
<input type="text" class="other-inputs" name="user" id="user" placeholder="User Name" oninput="updatePreview()"> |
|
<input type="text" class="other-inputs" name="time" id="time" placeholder="Time" oninput="updatePreview()"> |
|
<input type="text" class="other-inputs" name="weather" id="weather" placeholder="Weather" oninput="updatePreview()"> |
|
<input type="text" class="other-inputs" name="action" id="action" placeholder="Action" oninput="updatePreview()"> |
|
</div> |
|
</div> |
|
<div class="center-inputs"> |
|
<input type="text" class="center-input" name="current-events" id="current-events" placeholder="Current Events" oninput="updatePreview()"> |
|
<input type="text" class="center-input" name="speak" id="speak" placeholder="Speak" oninput="updatePreview()"> |
|
</div> |
|
<textarea class="entry" name="output" id="output" placeholder="Enter Output Here:" oninput="updatePreview()"></textarea> |
|
</div> |
|
<div class="control"> |
|
<input id="submit" type="submit" value="ADD TO DATABASE"> |
|
<div class="data-preview"> |
|
<label style="color: white; font-size: x-large;" for="preview">Data Preview</label> |
|
<textarea id="current-data-preview" name="current-data-preview" class="data"></textarea> |
|
<p style="color: rgb(143, 143, 143); font-size: medium; margin: 5px;"> Data Entries: {{data_entries}}</p> |
|
<pre class="data">{{full_data}}</pre> |
|
</div> |
|
</div> |
|
</div> |
|
</form> |
|
<script> |
|
var user = document.querySelector('#user'); |
|
var time = document.querySelector('#time'); |
|
var weather = document.querySelector('#weather'); |
|
var action = document.querySelector('#action'); |
|
var current_events = document.querySelector('#current-events'); |
|
var input = document.querySelector('#input'); |
|
var output = document.querySelector('#output'); |
|
var speak = document.querySelector('#speak'); |
|
var notes = document.querySelector('#notes'); |
|
var preview = document.querySelector('#current-data-preview'); |
|
|
|
time.value = "{{dummy_time}}"; |
|
weather.value = "{{dummy_weather}}"; |
|
current_events.value = "{{dummy_current_events}}"; |
|
|
|
function updatePreview() { |
|
format = "Time- {time}\nWeather- {weather}\nSurroundings- {current_events}\n{notes}\n{user}: {input}\nCRYSTAL:<###CRYSTAL-INTERNAL###> Speak\n{speak}\n<###CRYSTAL-INTERNAL###> {action}\n{output}" |
|
var formattedText = format.replace('{time}', time.value) |
|
.replace('{weather}', weather.value) |
|
.replace('{current_events}', current_events.value) |
|
.replace('{user}', user.value) |
|
.replace('{input}', input.value) |
|
.replace('{action}', action.value) |
|
.replace('{speak}', speak.value) |
|
.replace('{notes}', notes.value) |
|
.replace('{output}', output.value); |
|
|
|
preview.textContent = formattedText; |
|
} |
|
|
|
|
|
updatePreview(); |
|
|
|
</script> |
|
</body> |
|
|
|
</html> |
|
|
