mirror of
https://github.com/harvard-edge/cs249r_book.git
synced 2026-05-06 01:28:35 -05:00
c2c47875a9
- showQuizStats.js: add escapeHtml() and sanitize fileName/reason/details
before injecting into verificationModal.innerHTML (XSS: DOM text reinterpreted as HTML)
- injectQuizBtn.js: replace quizTitle string interpolation in innerHTML with
DOM construction (textContent) to prevent XSS (DOM text reinterpreted as HTML)
- highlight_menu.js: fix 'classList.contains === "hidden"' type error —
was comparing function reference to string; now correctly called as
classList.contains("hidden") (comparison between inconvertible types)
- index.html + indexHtml.js: rename malformed space-containing id attributes
'Show answers' -> 'show-answers' and 'Show chain of thought' -> 'show-chain-of-thought'
- settings.js: update three matching string keys to kebab-case to stay in sync
with renamed HTML ids (coordinated rename, no functionality change)
- demo_reference_rendering.html: add safeParseReferences() fallback wrapper,
replace direct parseReferences() call which was undefined in this context
- test_reference_renderer.js: remove parseReferences import (not exported),
rewrite testReferenceParsing() to use processReferences() with HTML output assertions
538 lines
25 KiB
HTML
538 lines
25 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>SocratiQ</title>
|
|
<!-- Ensure the Tailwind CSS CDN is linked in the <head> -->
|
|
<link href="https://cdn.jsdelivr.net/npm/tailwindcss@latest/dist/tailwind.min.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body id="mybody" class="min-h-screen z-9999">
|
|
|
|
<!-- Overlay container with fixed positioning -->
|
|
<div class="fixed inset-0 z-9999" style="pointer-events: none;">
|
|
<!-- Slide-out menu container -->
|
|
<div id="text-selection-menu"
|
|
class="absolute right-0 top-0 h-full transform translate-x-full transition-transform duration-300 ease-in-out"
|
|
style="width: 100%; max-width: 400px; pointer-events: auto;">
|
|
<!-- Actual slide-out menu with defined max-width -->
|
|
<div class="p-4 bg-gray-100 dark:bg-zinc-700 shadow-lg rounded-lg h-full flex flex-col overflow-auto"
|
|
style="max-width: 400px; box-shadow: 4px 0 15px rgba(0,0,0,0.25);">
|
|
|
|
<div class="flex items-center justify-between mb-4">
|
|
<h2 class="text-lg text-zinc-800 dark:text-white">
|
|
SocratiQ
|
|
</h2>
|
|
<div class="flex space-x-2">
|
|
|
|
<span id="new-chat-btn" title="Start a new chat"
|
|
class="hover:text-blue-300 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6" style="width: 1.5rem; height: 1.5rem;">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M2.25 12.76c0 1.6 1.123 2.994 2.707 3.227 1.087.16 2.185.283 3.293.369V21l4.076-4.076a1.526 1.526 0 0 1 1.037-.443 48.282 48.282 0 0 0 5.68-.494c1.584-.233 2.707-1.626 2.707-3.228V6.741c0-1.602-1.123-2.995-2.707-3.228A48.394 48.394 0 0 0 12 3c-2.392 0-4.744.175-7.043.513C3.373 3.746 2.25 5.14 2.25 6.741v6.018Z" />
|
|
</svg>
|
|
|
|
|
|
</span>
|
|
|
|
|
|
|
|
<span id="chat-quiz-btn" title="View your stats"
|
|
class="hover:text-blue-300 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6" style="width: 1.5rem; height: 1.5rem;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6a7.5 7.5 0 1 0 7.5 7.5h-7.5V6Z" />
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M13.5 10.5H21A7.5 7.5 0 0 0 13.5 3v7.5Z" />
|
|
</svg>
|
|
|
|
|
|
|
|
|
|
</span>
|
|
|
|
<span id="help-btn" title="How to use this widget?"
|
|
class="hover:text-blue-300 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6" style="width: 1.5rem; height: 1.5rem;">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M9.879 7.519c1.171-1.025 3.071-1.025 4.242 0 1.172 1.025 1.172 2.687 0 3.712-.203.179-.43.326-.67.442-.745.361-1.45.999-1.45 1.827v.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9 5.25h.008v.008H12v-.008Z" />
|
|
</svg>
|
|
|
|
</span>
|
|
|
|
<span id="settings-btn" title="Customize the widget"
|
|
class="hover:text-blue-300 text-sm text-zinc-600 dark:text-zinc-400">
|
|
<!-- <a href="#modal1"> -->
|
|
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6" style="width: 1.5rem; height: 1.5rem;">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M10.5 6h9.75M10.5 6a1.5 1.5 0 1 1-3 0m3 0a1.5 1.5 0 1 0-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 0 1-3 0m3 0a1.5 1.5 0 0 0-3 0m-9.75 0h9.75" />
|
|
</svg>
|
|
<!-- </a> -->
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div id="message-container" class="overflow-y-auto space-y-6 flex-grow" style="width:fit-content">
|
|
|
|
|
|
<div id='human-message_2'
|
|
class="p-3 ml-10 max-w-xs bg-blue-500 dark:bg-zinc-600 rounded-lg mb-2 chat-message">
|
|
<p class="text-sm text-white dark:text-zinc-200">
|
|
What is SocratiQ?
|
|
</p>
|
|
</div>
|
|
|
|
<div id="ai-message_2"
|
|
class="p-3 relative max-w-xs bg-white dark:bg-zinc-600 space-y-2 rounded-lg mb-2 chat-message" style="background-color: var(--socratiq-bg, #ffffff); color: var(--socratiq-text, #1f2328);">
|
|
<!--
|
|
<div class="w-full flex justify-end">
|
|
<div class="difficulty-dropdown inline-flex items-center text-xs bg-gray-100 dark:bg-zinc-700 rounded-md px-2 py-1 mb-2">
|
|
<div class="relative">
|
|
<button class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
|
|
<span class="current-difficulty-level">🚗 Intermediate</span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div class="difficulty-options hidden absolute top-full left-0 mt-1 w-40 bg-white dark:bg-zinc-800 rounded-md shadow-lg py-1 z-50" style="background-color: var(--socratiq-bg, #ffffff); color: var(--socratiq-text, #1f2328);">
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🚲 Beginner</div>
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🚗 Intermediate</div>
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🚁 Advanced</div>
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🛸 AGI</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> -->
|
|
<div id="markdown-preview" class="text-sm text-zinc-800 dark:text-zinc-200 chat-message">
|
|
SocratiQ is an AI Generative Learning Assistant, designed to make learning more efficient, engaging and
|
|
accessible. We welcome your <a href="https://forms.gle/jmWJcdzN2TXXjHWn7" target="_blank"
|
|
class="text-blue-500 hover:text-blue-700" title="Provide your feedback here">Feedback</a>. Learn more
|
|
about <a href="https://www.youtube.com/watch?v=mIT9nIsxCe0" target="_blank"
|
|
class="text-blue-500 hover:text-blue-700"
|
|
title="Watch the SocratiQ Introduction on YouTube">SocratiQ</a>.
|
|
</div>
|
|
|
|
<div id="utility-btn-container" class="absolute bottom-1 right-2 text-blue-400 flex space-x-2 p-2">
|
|
<!-- Buttons with icons -->
|
|
|
|
<button id='highlight-btn' class="w-4 h-4 flex items-center justify-center hover:text-blue-700"
|
|
title="Highlight">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="icons">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" />
|
|
</svg>
|
|
</button>
|
|
|
|
<button id='share-btn' class="w-4 h-4 flex items-center justify-center hover:text-blue-700"
|
|
title="Share"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="icons">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M7.217 10.907a2.25 2.25 0 1 0 0 2.186m0-2.186c.18.324.283.696.283 1.093s-.103.77-.283 1.093m0-2.186 9.566-5.314m-9.566 7.5 9.566 5.314m0 0a2.25 2.25 0 1 0 3.935 2.186 2.25 2.25 0 0 0-3.935-2.186Zm0-12.814a2.25 2.25 0 1 0 3.933-2.185 2.25 2.25 0 0 0-3.933 2.185Z" />
|
|
</svg>
|
|
</button>
|
|
<button id='copy-btn' class="w-4 h-4 mr-1 mt-1 flex items-center justify-center hover:text-blue-700"
|
|
title="Copy"><svg id="copy-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M15.75 17.25v3.375c0 .621-.504 1.125-1.125 1.125h-9.75a1.125 1.125 0 0 1-1.125-1.125V7.875c0-.621.504-1.125 1.125-1.125H6.75a9.06 9.06 0 0 1 1.5.124m7.5 10.376h3.375c.621 0 1.125-.504 1.125-1.125V11.25c0-4.46-3.243-8.161-7.5-8.876a9.06 9.06 0 0 0-1.5-.124H9.375c-.621 0-1.125.504-1.125 1.125v3.5m7.5 10.375H9.375a1.125 1.125 0 0 1-1.125-1.125v-9.25m12 6.625v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H9.75" />
|
|
</svg>
|
|
</button>
|
|
<button id='download-btn' class="w-4 h-4 mr-2 flex items-center justify-center hover:text-blue-700"
|
|
title="Download"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor" class="icons">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3" />
|
|
</svg>
|
|
</button>
|
|
|
|
</div>
|
|
|
|
|
|
<div id="reference-btn-container_temp" class="flex space-x-2 text-xs font-mono">
|
|
<a href="https://harvard-edge.github.io/cs249r_book/"
|
|
class="inline-block bg-blue-100 text-zinc-900 px-4 py-0.5 rounded-md" target="_blank"
|
|
rel="noopener noreferrer" title="TinyML Textbook">1</a>
|
|
<!-- Omitted buttons as they are not links -->
|
|
<a href="https://github.com/harvard-edge/cs249r_book"
|
|
class="inline-block bg-blue-100 text-zinc-900 px-4 py-0.5 rounded-md" target="_blank"
|
|
rel="noopener noreferrer" title="TinyML GitHub Repo">2</a>
|
|
<a href="https://www.edx.org/certificates/professional-certificate/harvardx-tiny-machine-learning"
|
|
class="inline-block bg-blue-100 text-zinc-900 px-4 py-0.5 rounded-md" target="_blank"
|
|
rel="noopener noreferrer" title="TinyML on EdX">3</a>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- Additional chat messages will go here -->
|
|
<div id="scroll-target"></div> <!-- Dummy div at the bottom -->
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
</div>
|
|
|
|
<div id="input-container" class="mt-4 relative">
|
|
<!-- <div id="ai-prompt-label" style="font-size: 12px; color: rgb(85, 85, 85); margin-bottom: 8px; display: block;">Included context:</div> -->
|
|
|
|
<button id="context-button" title="Context">
|
|
<div style="display: flex;"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
stroke-width="1.5" stroke="currentColor" style="width: 1.2rem; height: 1.2rem;">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
|
|
</svg>
|
|
<span style="font-size: 12px; margin-left: 4px;">Add Context</span>
|
|
</div>
|
|
</button>
|
|
<!-- Copy container with dynamic height -->
|
|
<div id="copy-container" class="hidden">
|
|
|
|
|
|
</div>
|
|
|
|
<!-- Input field with embedded button -->
|
|
<div class="input-wrapper relative">
|
|
<input type="text" id="user-input"
|
|
class="w-full pl-2 pr-10 py-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-zinc-600 dark:border-zinc-500 dark:text-white"
|
|
placeholder="type '@' to reference a section..." />
|
|
<button id="enter-btn" class="absolute inset-y-0 right-0 flex items-center pr-3 hover:text-blue-500"
|
|
type="submit">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6" style="transform: rotate(-45deg);">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M6 12 3.269 3.125A59.769 59.769 0 0 1 21.485 12 59.768 59.768 0 0 1 3.27 20.875L5.999 12Zm0 0h7.5" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="bg-zinc-100 text-gray-500 p-1 dark:bg-zinc-200/50" style="font-size: 8pt">
|
|
<!-- <p class="font-bold">Be cautious</p> -->
|
|
<p>Information provided here may not always be accurate.<span> <a href="#" id="openModal-feedback"
|
|
class="underline text-blue-500 hover:text-zinc-800 dark:hover:text-zinc-900">Provide feedback</a>
|
|
</span></p>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<label for="menu-toggle" id="toggleButton"
|
|
class="cursor-pointer p-4 bg-blue-500 text-white border border-gray-100 border-r-0 absolute top-1/2 right-0 transform -translate-y-1/2"
|
|
style="pointer-events: auto; display: none; transform: translateY(-50%) translateX(-5px); z-index:9999">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
|
|
class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M7.5 21 3 16.5m0 0L7.5 12M3 16.5h13.5m0-13.5L21 7.5m0 0L16.5 12M21 7.5H7.5" />
|
|
</svg>
|
|
</label>
|
|
|
|
</div>
|
|
|
|
<!-- Hidden checkbox to hold the state -->
|
|
<input type="checkbox" id="menu-toggle" class="hidden" />
|
|
|
|
<style>
|
|
.no-scrollbar::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
</style>
|
|
</div>
|
|
</div>
|
|
<div id="success-notice" style="
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: #f8f9fa;
|
|
padding: 10px 15px;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 4px rgba(0,0,0,0.1),
|
|
0 0 15px rgba(66, 153, 225, 0.3);
|
|
font-family: system-ui, -apple-system, sans-serif;
|
|
color: #2d3748;
|
|
animation: glow 2s infinite alternate;
|
|
">
|
|
<span style="margin-right: 8px">Press</span>
|
|
<kbd style="
|
|
background: #fff;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 3px;
|
|
padding: 2px 6px;
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
|
font-family: monospace;
|
|
">Ctrl</kbd>
|
|
<span style="margin: 0 4px">+</span>
|
|
<kbd style="
|
|
background: #fff;
|
|
border: 1px solid #d1d5db;
|
|
border-radius: 3px;
|
|
padding: 2px 6px;
|
|
box-shadow: 0 1px 1px rgba(0,0,0,0.2);
|
|
font-family: monospace;
|
|
">/</kbd> to open chat
|
|
<style>
|
|
@keyframes glow {
|
|
from {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
|
|
0 0 15px rgba(66, 153, 225, 0.3);
|
|
}
|
|
|
|
to {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1),
|
|
0 0 20px rgba(66, 153, 225, 0.5);
|
|
}
|
|
}
|
|
</style>
|
|
</div>
|
|
|
|
<div id="error-notice" style="
|
|
display: none;
|
|
position: fixed;
|
|
bottom: 20px;
|
|
right: 20px;
|
|
background: lightcoral;
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
">
|
|
Disconnected
|
|
</div>
|
|
|
|
<div id="load_chats"></div>
|
|
<div id="modal1" class="modal">
|
|
<!-- Modal content -->
|
|
|
|
<div class="bg-white dark:bg-zinc-800 p-6 rounded-lg shadow-lg max-w-sm mx-auto mt-10" style="background-color: var(--socratiq-bg, #ffffff); color: var(--socratiq-text, #1f2328);">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<span class="text-lg font-semibold dark:text-white">Settings</span>
|
|
<button id='close-btn' class="text-zinc-400 hover:text-zinc-600 dark:hover:text-zinc-300">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
|
|
stroke="currentColor" class="w-6 h-6">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- New Difficulty Level Key Card -->
|
|
<div class="mb-6 p-4 border rounded-lg dark:border-zinc-700">
|
|
<div class="grid grid-cols-2 gap-4">
|
|
<div class="difficulty-level beginner-level">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">🚲</span>
|
|
<span class="font-semibold text-sm dark:text-white">Beginner</span>
|
|
</div>
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400">For learners who are new to machine learning systems and
|
|
are building foundational knowledge of concepts, tools, and basic implementations.</p>
|
|
</div>
|
|
|
|
<div class="difficulty-level intermediate-level">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">🚗</span>
|
|
<span class="font-semibold text-sm dark:text-white">Intermediate</span>
|
|
</div>
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400">For learners who have a working understanding of machine
|
|
learning principles and are ready to design and optimize systems for real-world applications.</p>
|
|
</div>
|
|
|
|
<div class="difficulty-level advanced-level">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">🚁</span>
|
|
<span class="font-semibold text-sm dark:text-white">Advanced</span>
|
|
</div>
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400">For learners with significant experience in machine
|
|
learning systems, focused on tackling complex problems, scaling solutions, and innovating in the field.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="difficulty-level agi-level">
|
|
<div class="flex items-center gap-2">
|
|
<span class="text-xl">🛸</span>
|
|
<span class="font-semibold text-sm dark:text-white">Bloom's Taxonomy</span>
|
|
</div>
|
|
<p class="text-xs text-zinc-600 dark:text-zinc-400">Bloom's Taxonomy: Bloom's Taxonomy is an educational
|
|
framework classifying cognitive skills from basic recall to complex evaluation.
|
|
<a class="text-blue-500 text-sm hover:text-zinc-800 dark:hover:text-zinc-900"
|
|
href="https://en.wikipedia.org/wiki/Bloom%27s_taxonomy" target="_blank">Read More</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="mb-6">
|
|
<label for="understanding-level" class="block mb-2 font-medium text-zinc-900 dark:text-zinc-300">Understanding
|
|
Level</label>
|
|
<input type="range" id="understanding-slider" name="understanding-level" min="0" max="3" value="2"
|
|
class="w-full h-2 bg-zinc-200 rounded-lg appearance-none cursor-pointer dark:bg-zinc-700" />
|
|
<div class="flex justify-between text-xs text-zinc-500 dark:text-zinc-400 mt-1">
|
|
<span id="low-understanding">🚲</span>
|
|
<span id="medium-understanding">🚗</span>
|
|
<span id="high-understanding">🚁</span>
|
|
<span id="super-high-understanding">🛸</span>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="hidden">
|
|
<div class="mb-4">
|
|
<label for="choices">Choose an LLM:</label>
|
|
<select id="choices" name="choices">
|
|
<option value="gemma-7b-It">Gemma-7b-it</option>
|
|
<option value="llama3-70b-8192">Llama3-70b-8192</option>
|
|
<option value="llama3-8b-8192" selected>Llama3-8b-8192</option>
|
|
<option value="mixtral-8x7b-32768">Mixtral-8x7b-32768</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="inline-flex items-center">
|
|
<input id="show-answers" type="checkbox"
|
|
class="text-blue-600 form-checkbox rounded border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-blue-600"
|
|
checked />
|
|
<span class="ml-2 text-zinc-900 dark:text-zinc-300">Show answers</span>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
|
|
<div class="mb-4">
|
|
|
|
<label class="inline-flex items-center">
|
|
<input id="Enable-highlight-menu" type="checkbox"
|
|
class="text-blue-600 form-checkbox rounded border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-blue-600"
|
|
checked />
|
|
<span class="ml-2 text-zinc-900 dark:text-zinc-300">Enable Highlight Menu</span>
|
|
</label>
|
|
</div>
|
|
|
|
|
|
<div class="mb-6">
|
|
<label class="inline-flex items-center">
|
|
<input id="show-chain-of-thought" type="checkbox"
|
|
class="text-blue-600 form-checkbox rounded border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-blue-600"
|
|
checked />
|
|
<span class="ml-2 text-zinc-900 dark:text-zinc-300">Show chain of thought</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<!-- <button
|
|
class="w-full bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline">
|
|
Save
|
|
</button> -->
|
|
</div>
|
|
|
|
<!-- <div class="mb-4">
|
|
<label class="inline-flex items-center">
|
|
<input id="Apply-blooms-taxonomy" type="checkbox"
|
|
class="text-blue-600 form-checkbox rounded border-zinc-300 dark:border-zinc-700 dark:bg-zinc-800 dark:checked:bg-blue-600"
|
|
checked />
|
|
<span class="ml-2 text-zinc-900 dark:text-zinc-300">Apply Bloom's Taxonomy</span>
|
|
</label>
|
|
</div> -->
|
|
|
|
</div>
|
|
|
|
|
|
<div id="modal_feedback">
|
|
|
|
</div>
|
|
|
|
<div id="helpModal" class="hidden">
|
|
|
|
</div>
|
|
|
|
|
|
|
|
<div class="hidden" id="bag-of-stuff">
|
|
|
|
<div id='human-message'
|
|
class="p-3 text-white ml-10 max-w-xs bg-blue-500 dark:bg-zinc-600 rounded-lg mb-2 human-message-chat">
|
|
<p class="text-sm text-white dark:text-zinc-200">
|
|
An error occurred. Please try again.
|
|
</p>
|
|
</div>
|
|
|
|
<div id="ai-message" class="p-3 max-w-xs bg-white dark:bg-zinc-600 space-y-2 rounded-lg mb-2 ai-message-chat" style="background-color: var(--socratiq-bg, #ffffff); color: var(--socratiq-text, #1f2328);">
|
|
|
|
<div class="w-full flex justify-end inner-ai-message">
|
|
<div
|
|
class="difficulty-dropdown inline-flex items-center text-xs bg-gray-100 dark:bg-zinc-700 rounded-md px-2 py-1 mb-2">
|
|
<div class="relative">
|
|
<button
|
|
class="flex items-center space-x-1 text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white">
|
|
<span class="current-difficulty-level">🚗 Intermediate</span>
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
|
|
</svg>
|
|
</button>
|
|
<div
|
|
class="difficulty-options hidden absolute top-full left-0 mt-1 w-40 bg-white dark:bg-zinc-800 rounded-md shadow-lg py-1 z-50" style="background-color: var(--socratiq-bg, #ffffff); color: var(--socratiq-text, #1f2328);">
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🚲
|
|
Beginner</div>
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🚗
|
|
Intermediate</div>
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🚁
|
|
Advanced</div>
|
|
<div class="difficulty-option px-4 py-2 hover:bg-gray-100 dark:hover:bg-zinc-700 cursor-pointer">🛸
|
|
Bloom's Taxonomy</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="progress"></div>
|
|
<div id="markdown-preview" class="text-sm text-zinc-800 dark:text-zinc-200 markdown-preview-container">
|
|
An error occurred. Please try again.
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div id="reference-btn-container" class="flex space-x-2 text-xs font-mono">
|
|
<!-- <button id="reference-btn" class="bg-blue-100 text-zinc-900 px-4 py-0.5 rounded-md">1</button> -->
|
|
|
|
</div>
|
|
|
|
<a href="https://example.com" id="reference-btn"
|
|
class="inline-block bg-blue-100 text-zinc-900 px-4 py-0.5 rounded-md">1</a>
|
|
|
|
|
|
|
|
<!-- The Modal -->
|
|
|
|
</div>
|
|
|
|
<!-- tooltip -->
|
|
|
|
<!-- Add this near the end of your body tag -->
|
|
<!-- <div id="tooltip-template" class="tooltip-container" style="display: none;">
|
|
<div class="tooltip-content"></div>
|
|
<div class="tooltip-arrow"></div>
|
|
</div> -->
|
|
</body>
|
|
|
|
</html> |