-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
181 lines (172 loc) · 11 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en" data-theme="dracula">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tutor Recorder with Sound Monitor</title>
<link href="/dist/output.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="layout-grid">
<!-- Left Sidebar -->
<div id="leftSidebar" class="sidebar left-sidebar">
<h2 class="text-xl font-bold">Chat Management</h2>
<button id="createChatButton" class="btn btn-primary w-full mb-2">Create New Chat</button>
<div id="chatList" class="overflow-y-auto mb-2">
<!-- Chat items will be dynamically added here by JavaScript -->
</div>
<button id="deleteSelectedChatButton" class="btn btn-warning w-full mb-2">Delete Selected Chat</button>
<button id="deleteLocalHistoryButton" class="btn btn-error w-full">Delete Local History</button>
</div>
<div id="leftResizeHandle" class="resize-handle"></div>
<!-- Main Content -->
<div class="main-content">
<h1 id="tutor-recorder-with-sound-monitor" class="text-3xl font-bold mb-4">Tutor Recorder with Sound Monitor</h1>
<div class="mb-4">
<label for="microphoneSelect">Choose Microphone:</label>
<select id="microphoneSelect" class="select select-bordered w-full max-w-xs"></select>
</div>
<div class="flex space-x-4 mb-4">
<button id="toggleTutorButton" class="btn btn-primary">Start Tutor</button>
<button id="sendButton" class="btn btn-success">Send</button>
<button id="settingsButton" class="btn btn-primary">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</button>
<div id="thinkingSpinner" class="spinner hidden"></div>
</div>
<div class="mb-4">
<div id="statusDisplay" class="text-lg font-semibold">Ready to start</div>
<div id="soundLevelDisplay" class="text-lg">Sound Level: N/A</div>
</div>
<!-- Settings Overlay -->
<div id="settingsOverlay" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50 flex justify-center items-center">
<div class="bg-base-200 p-6 rounded-lg w-3/4 max-h-3/4 overflow-y-auto">
<h2 class="text-2xl font-bold mb-4">Settings</h2>
<div class="grid grid-cols-2 gap-4">
<div>
<label for="tutoringLanguageSelect">Tutoring Language:</label>
<select id="tutoringLanguageSelect" class="select select-bordered w-full"></select>
</div>
<div>
<label for="tutorsLanguageSelect">Tutor's Language:</label>
<select id="tutorsLanguageSelect" class="select select-bordered w-full"></select>
</div>
<div>
<label for="tutorsVoiceSelect">Tutor's Voice:</label>
<select id="tutorsVoiceSelect" class="select select-bordered w-full">
<option value="alloy">Alloy</option>
<option value="echo">Echo</option>
<option value="fable">Fable</option>
<option value="onyx">Onyx</option>
<option value="nova">Nova</option>
<option value="shimmer">Shimmer</option>
</select>
</div>
<div>
<label for="partnersVoiceSelect">Partner's Voice:</label>
<select id="partnersVoiceSelect" class="select select-bordered w-full">
<option value="nova">Nova</option>
<option value="alloy">Alloy</option>
<option value="echo">Echo</option>
<option value="fable">Fable</option>
<option value="onyx">Onyx</option>
<option value="shimmer">Shimmer</option>
</select>
</div>
<div>
<label for="interventionLevelSelect">Tutor's Intervention Level:</label>
<select id="interventionLevelSelect" class="select select-bordered w-full">
<option value="low">Low</option>
<option value="medium">Medium</option>
<option value="high">High</option>
</select>
</div>
<div class="flex items-center space-x-2">
<div class="flex-1">
<label for="modelSelect">AI Model:</label>
<select id="modelSelect" class="select select-bordered w-full">
<option value="Groq">Groq</option>
<option value="OpenAI">OpenAI</option>
<option value="Anthropic">Anthropic</option>
</select>
</div>
<div class="flex-1">
<label for="apiKeyInput">API Key:</label>
<div class="flex">
<input type="password" id="apiKeyInput" class="input input-bordered flex-grow bg-base-100 text-base-content" placeholder="Enter API key">
<button id="sendApiKeyButton" class="btn btn-primary ml-2">Send</button>
</div>
</div>
</div>
<div>
<label for="playbackSpeedSlider">Playback Speed: </label>
<input type="range" id="playbackSpeedSlider" min="0" max="1" step="0.1" value="1" class="range range-xs w-full">
<span id="playbackSpeedDisplay">100%</span>
</div>
<div>
<label for="pauseTimeSlider">Pause Time Before Send: </label>
<input type="range" id="pauseTimeSlider" min="1" max="10" step="1" value="2" class="range range-xs w-full">
<span id="pauseTimeDisplay">2 sec</span>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">Disable tutor (for simple conversation)</span>
<input type="checkbox" id="disableTutorCheckbox" class="checkbox checkbox-lg" />
</label>
</div>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text">I don't have the best accent in the world</span>
<input type="checkbox" id="accentIgnoreCheckbox" class="checkbox checkbox-lg" checked />
</label>
</div>
</div>
<div id="settingsInfoBox" class="bg-base-300 p-4 rounded-lg mt-4 mb-4 h-24 overflow-y-auto">
Settings information will be displayed here.
</div>
<button id="closeSettingsButton" class="btn btn-primary mt-4">Close Settings</button>
</div>
</div>
<!-- Upper row: Chat History and Tutor's Comments -->
<div class="flex space-x-4 mb-4">
<div class="flex-1">
<h3 class="text-xl font-semibold mb-2">Chat History</h3>
<div id="chatHistoryDisplay" class="bg-base-200 p-4 rounded-lg h-64 overflow-y-auto"></div>
</div>
<div class="flex-1">
<h3 class="text-xl font-semibold mb-2">Tutor's Comments</h3>
<div id="tutorsCommentsDisplay" class="bg-base-200 p-4 rounded-lg h-64 overflow-y-auto"></div>
</div>
</div>
<!-- Lower row: Info Window and Summary -->
<div class="flex space-x-4 mb-4">
<div class="flex-1">
<h3 class="text-xl font-semibold mb-2">Info Window</h3>
<div id="infoWindow" class="bg-base-200 p-4 rounded-lg h-64 overflow-y-auto">
Just press start tutor and have a conversation with the tutor... there is a slight delay, be patient. Contact me for suggestions or feedback: [email protected] If you want to support me, just star or fork me repo: https://github.com/artnoage/Tutor.git
</div>
</div>
</div>
</div>
<!-- Right Sidebar -->
<div id="rightResizeHandle" class="resize-handle"></div>
<div id="rightSidebar" class="sidebar right-sidebar">
<h2 class="text-xl font-bold">Homework Chat</h2>
<div id="homeworkChatDisplay" class="bg-base-300 p-4 rounded-lg overflow-y-auto overflow-x-hidden"></div>
<div class="flex flex-col gap-2">
<button id="giveHomeworkButton" class="btn btn-primary w-full">Give Me Homework</button>
<button id="downloadHomeworkButton" class="btn btn-secondary w-full">Download Homework</button>
<button id="clearHomeworkButton" class="btn btn-warning w-full">Clear Homework</button>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
<script src="/js/tutor-core.js" type="module"></script>
<script src="/js/tutor-ui-helpers.js" type="module"></script>
<script src="/js/tutor-ui.js" type="module"></script>
<script src="/js/sidebar-resize.js" type="module"></script>
</body>
</html>