Spaces:

atlury
/

digitalhuman

Running

File size: 23,876 Bytes
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Aged Guru Education Assistant</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- Google Fonts for better typography -->
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=Roboto:wght@400;500&display=swap" rel="stylesheet">
  <!-- Include necessary CSS styles -->
  <style>
    /* Reset and base styles */
    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Inter', sans-serif;
      background-color: #f9f9f9;
      display: flex;
      min-height: 100vh;
      color: #333;
      overflow: hidden;
    }

    /* Sidebar styling */
    .sidebar {
      width: 260px;
      background-color: #ffffff;
      box-shadow: 2px 0 5px rgba(0,0,0,0.1);
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      padding: 30px 20px;
      position: fixed;
      height: 100%;
      overflow-y: auto;
      transition: width 0.3s ease;
    }

    .sidebar h2 {
      text-align: center;
      margin-bottom: 40px;
      font-family: 'Roboto', sans-serif;
      font-weight: 600;
      font-size: 1.6em;
      color: #4A4A4A;
    }

    .sidebar a {
      color: #555555;
      padding: 12px 15px;
      text-decoration: none;
      font-size: 1em;
      border-radius: 8px;
      margin-bottom: 10px;
      transition: background-color 0.3s, color 0.3s, transform 0.2s;
      display: flex;
      align-items: center;
    }

    .sidebar a:hover {
      background-color: #f0f0f0;
      color: #333333;
      transform: translateX(5px);
    }

    .sidebar a.active {
      background-color: #e0f7fa;
      color: #00796B;
      font-weight: 500;
    }

    .sidebar a::before {
      content: '';
      display: inline-block;
      width: 6px;
      height: 6px;
      background-color: #00796B;
      border-radius: 50%;
      margin-right: 10px;
      opacity: 0;
      transition: opacity 0.3s;
    }

    .sidebar a.active::before {
      opacity: 1;
    }

    /* Main content styling */
    .main-content {
      margin-left: 260px;
      padding: 30px;
      flex: 1;
      background-color: #f9f9f9;
      overflow-y: auto;
      height: 100vh;
      transition: margin-left 0.3s ease;
    }

    /* Header */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 25px;
    }

    .header h1 {
      font-family: 'Roboto', sans-serif;
      font-size: 2em;
      color: #333333;
    }

    /* Card Styling */
    .card {
      background-color: #ffffff;
      border-radius: 12px;
      box-shadow: 0 4px 10px rgba(0,0,0,0.05);
      padding: 25px;
      margin-bottom: 25px;
      transition: transform 0.3s, box-shadow 0.3s;
    }

    .card:hover {
      transform: translateY(-5px);
      box-shadow: 0 6px 15px rgba(0,0,0,0.1);
    }

    /* Button Styling */
    button {
      background-color: #00796B;
      border: none;
      color: white;
      padding: 12px 20px;
      font-size: 1em;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }

    button:hover {
      background-color: #005D56;
      transform: translateY(-2px);
    }

    button:disabled {
      background-color: #A5D6A7;
      cursor: not-allowed;
    }

    /* Select Dropdown Styling */
    select {
      width: 100%;
      padding: 10px 15px;
      border: 1px solid #cccccc;
      border-radius: 8px;
      font-size: 1em;
      background-color: #ffffff;
      transition: border-color 0.3s;
      margin-bottom: 15px;
    }

    select:focus {
      border-color: #00796B;
      outline: none;
    }

    /* Chat Box Styling */
    #chat-box {
      height: 400px;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      overflow-y: auto;
      padding: 20px;
      background-color: #fafafa;
      margin-bottom: 20px;
      position: relative;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }

    .message-container {
      margin-bottom: 20px;
      display: flex;
    }

    .message {
      padding: 12px 18px;
      border-radius: 20px;
      max-width: 75%;
      position: relative;
      word-wrap: break-word;
      box-shadow: 0 2px 8px rgba(0,0,0,0.05);
      font-size: 0.95em;
      line-height: 1.4;
    }

    .user {
      justify-content: flex-end;
    }

    .user .message {
      background-color: #DCF8C6;
      border-bottom-right-radius: 0;
    }

    .assistant {
      justify-content: flex-start;
    }

    .assistant .message {
      background-color: #FFFFFF;
      border-bottom-left-radius: 0;
    }

    /* Microphone Button Styling */
    #mic-container {
      text-align: center;
      margin-bottom: 20px;
    }

    /* Updated Start Button */
    #start_button {
      background-color: #00796B;
      border: none;
      color: white;
      padding: 15px;
      border-radius: 50%;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    #start_button::before {
      content: '';
      position: absolute;
      width: 200%;
      height: 200%;
      background: rgba(255, 255, 255, 0.3);
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0);
      border-radius: 50%;
      transition: transform 0.5s ease-out;
    }

    #start_button:active::before {
      transform: translate(-50%, -50%) scale(1);
    }

    #start_button:disabled {
      background-color: #A5D6A7;
      cursor: not-allowed;
    }

    #start_button:hover:not(:disabled) {
      background-color: #005D56;
      transform: scale(1.05);
    }

    /* Icon Styling */
    .mic-icon {
      width: 30px;
      height: 30px;
      transition: transform 0.3s;
    }

    /* Animation for Mic Icon */
    .mic-animate {
      animation: pulse 2s infinite;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }
      50% {
        transform: scale(1.2);
      }
      100% {
        transform: scale(1);
      }
    }

    /* Logs Styling */
    #logs {
      height: 120px;
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      overflow-y: auto;
      padding: 15px;
      background-color: #f1f1f1;
      font-size: 0.85em;
      margin-bottom: 10px;
      box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);
    }

    #clear-logs {
      background-color: #FF5252;
      border: none;
      color: white;
      padding: 10px 18px;
      font-size: 0.9em;
      cursor: pointer;
      border-radius: 8px;
      transition: background-color 0.3s, transform 0.2s;
    }

    #clear-logs:hover {
      background-color: #E53935;
      transform: scale(1.02);
    }

    /* Chat Stats */
    #chat-stats {
      font-size: 0.85em;
      color: #888888;
      text-align: center;
      margin-top: 10px;
    }

    /* Voice Selection Container */
    #tts-voice-container label {
      display: block;
      margin-bottom: 8px;
      color: #555555;
      font-weight: 500;
    }

    /* Hidden Class */
    .hidden {
      display: none;
    }

    /* Scrollbar Styling */
    #chat-box::-webkit-scrollbar,
    #logs::-webkit-scrollbar {
      width: 8px;
    }

    #chat-box::-webkit-scrollbar-track,
    #logs::-webkit-scrollbar-track {
      background: #f1f1f1;
      border-radius: 4px;
    }

    #chat-box::-webkit-scrollbar-thumb,
    #logs::-webkit-scrollbar-thumb {
      background: #cccccc;
      border-radius: 4px;
    }

    #chat-box::-webkit-scrollbar-thumb:hover,
    #logs::-webkit-scrollbar-thumb:hover {
      background: #a8a8a8;
    }

    /* Responsive Adjustments */
    @media (max-width: 768px) {
      .sidebar {
        width: 220px;
      }

      .main-content {
        margin-left: 220px;
      }
    }

    @media (max-width: 600px) {
      .sidebar {
        position: relative;
        width: 100%;
        height: auto;
        flex-direction: row;
        overflow-x: auto;
        padding: 15px 10px;
      }

      .sidebar h2 {
        display: none;
      }

      .sidebar a {
        margin-right: 10px;
        margin-bottom: 0;
        padding: 10px 12px;
        font-size: 0.9em;
      }

      .main-content {
        margin-left: 0;
        padding: 20px 15px;
      }

      .header {
        flex-direction: column;
        align-items: flex-start;
      }

      .header h1 {
        margin-bottom: 10px;
        font-size: 1.5em;
      }
    }

    /* Controls Container Styling */
    #controls {
      display: flex;
      gap: 10px;
      margin-bottom: 15px;
      flex-wrap: wrap;
    }

    /* Initialize Button Styling */
    #download {
      flex: 0 0 auto;
      background-color: #00796B;
      border: none;
      color: white;
      padding: 10px 20px;
      font-size: 1em;
      border-radius: 8px;
      cursor: pointer;
      transition: background-color 0.3s, transform 0.2s;
    }

    #download:hover {
      background-color: #005D56;
      transform: translateY(-2px);
    }

    #download:disabled {
      background-color: #A5D6A7;
      cursor: not-allowed;
    }

    /* Enhanced Layout for Digital Human Mentor Voice Section */
    #voice .card {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-gap: 20px;
    }

    /* Adjust controls and voice selection */
    #model-selection-container,
    #tts-voice-container {
      display: flex;
      flex-direction: column;
    }

    #model-selection-container label,
    #tts-voice-container label {
      margin-bottom: 5px;
      font-weight: 500;
      color: #555555;
    }

    /* Chat and Controls Layout */
    #chat-container {
      display: flex;
      flex-direction: column;
    }

    /* Ensure chat-box takes full width */
    #chat-box {
      width: 100%;
    }

    /* Adjust microphone container */
    #mic-container {
      display: flex;
      justify-content: center;
      margin-bottom: 20px;
    }

    /* Configuration Info */
    #configuration {
      margin-top: 15px;
      font-size: 0.9em;
      color: #555555;
    }

    /* Responsive Grid Adjustments */
    @media (max-width: 800px) {
      #voice .card {
        grid-template-columns: 1fr;
      }
    }
  </style>
</head>
<body>

<!-- Sidebar -->
<div class="sidebar">
  <h2>Aged Guru</h2>
  <a href="#" class="active" data-content="voice">Digital Human Mentor Voice</a>
  <a href="#" data-content="video">Digital Human Mentor Video</a>
  <a href="#" data-content="math-assistant">Virtual Math Assistant</a>
  <a href="#" data-content="advanced-math">Advanced Mathematics & Problem Solving</a>
  <a href="#" data-content="interdisciplinary">Interdisciplinary Studies Assistant</a>
  <a href="#" data-content="document-insights">Document Insights</a>
  <a href="#" data-content="3d-explorer">3D Explorer</a>
  <a href="#" data-content="knowledge-base">Knowledge Base</a>
  <a href="#" data-content="">Digital Twin</a>
  <a href="#" data-content="">Student</a>
  <a href="#" data-content="">Teacher</a>
</div>

<!-- Main Content -->
<div class="main-content" id="main-content">
  <div class="header">
    <h1>Aged Guru Education Assistant</h1>
    <!-- You can add user profile or settings here -->
  </div>
  <!-- Content will be loaded here -->
  <div id="content-area">
    <!-- Digital Human Mentor Voice Content Starts -->
    <div id="voice" class="content-section">
      <div class="card">
        <!-- Model Selection Section -->
        <div id="model-selection-container">
          <label for="model-selection">Select Language Model:</label>
          <select id="model-selection"></select>
          <button id="download">Initialize</button>
        </div>

        <!-- Voice Selection Section -->
        <div id="tts-voice-container">
          <label for="voices">Select Voice:</label>
          <select id="voices"></select>
        </div>
      </div>

      <div id="chat-container">
        <div id="configuration" class="hidden">
          <div id="model-info">
            <strong>LLM:</strong> <span id="selected-model">Not Initialized</span>
          </div>
        </div>
        <div id="chat-box"></div>

        <!-- Microphone button -->
        <div id="mic-container">
          <button id="start_button" disabled>
            <svg class="mic-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
              <path d="M12 14a3 3 0 003-3V5a3 3 0 00-6 0v6a3 3 0 003 3zm5-3a5 5 0 01-10 0H5a7 7 0 0014 0h-2z"/>
            </svg>
          </button>
        </div>

        <div id="chat-stats" class="hidden"></div>
      </div>

      <h3>Logs</h3>
      <div id="logs">
        <div id="download-status" class="hidden"></div>
      </div>
      <button id="clear-logs">Clear Logs</button>
    </div>
    <!-- Digital Human Mentor Voice Content Ends -->

    <!-- Placeholder for other sections -->
    <div id="video" class="content-section hidden">
      <div class="card">
        <h2>Interactive Digital Human Mentor Video</h2>
        <p>Content for Video Mentor will go here.</p>
      </div>
    </div>

    <div id="math-assistant" class="content-section hidden">
      <div class="card">
        <h2>Virtual Math Assistant</h2>
        <p>Content for Virtual Math Assistant will go here.</p>
      </div>
    </div>

    <div id="advanced-math" class="content-section hidden">
      <div class="card">
        <h2>Advanced Mathematics & Problem Solving</h2>
        <p>Content for Advanced Mathematics & Problem Solving will go here.</p>
      </div>
    </div>

    <div id="interdisciplinary" class="content-section hidden">
      <div class="card">
        <h2>Interdisciplinary Studies Assistant</h2>
        <p>Content for Interdisciplinary Studies Assistant will go here.</p>
      </div>
    </div>

    <div id="document-insights" class="content-section hidden">
      <div class="card">
        <h2>Document Insights</h2>
        <p>Content for Document Insights will go here.</p>
      </div>
    </div>

    <div id="3d-explorer" class="content-section hidden">
      <div class="card">
        <h2>3D Explorer</h2>
        <p>Content for 3D Explorer will go here.</p>
      </div>
    </div>

    <div id="knowledge-base" class="content-section hidden">
      <div class="card">
        <h2>Knowledge Base</h2>
        <p>Content for Knowledge Base will go here.</p>
      </div>
    </div>
  </div>
</div>

<!-- Include the necessary scripts -->
<script type="module">
  import * as webllm from "https://esm.run/@mlc-ai/web-llm";

  // Sidebar navigation
  const sidebarLinks = document.querySelectorAll('.sidebar a');
  const contentSections = document.querySelectorAll('.content-section');

  sidebarLinks.forEach(link => {
    link.addEventListener('click', (e) => {
      e.preventDefault();
      // Remove active class from all links
      sidebarLinks.forEach(l => l.classList.remove('active'));
      // Add active class to the clicked link
      link.classList.add('active');

      // Hide all content sections
      contentSections.forEach(section => section.classList.add('hidden'));

      // Show the selected content section
      const target = link.getAttribute('data-content');
      document.getElementById(target).classList.remove('hidden');
    });
  });

  // Initialize the Digital Human Mentor Voice section
  const messages = [
    {
      content: "You are Chatbot, a friendly, helpful robot called Aged Guru. Respond to what the user said in a creative and helpful way, but keep your responses brief.\n" +
        "Keep responses brief and legible. Your output will be converted to audio.\n" +
        "Your responses will converted to audio. Please do not include any special characters in your response other than '!' or '?'.",
      role: "system"
    }
  ];

  const availableModels = webllm.prebuiltAppConfig.model_list.map(
    (m) => m.model_id
  );
  let selectedModel = "TinyLlama-1.1B-Chat-v0.4-q4f32_1-MLC-1k";

  function updateEngineInitProgressCallback(report) {
    console.log("initialize", report.progress);
    document.getElementById("download-status").textContent = report.text;
  }

  const engine = new webllm.MLCEngine();
  engine.setInitProgressCallback(updateEngineInitProgressCallback);

  async function initializeWebLLMEngine() {
    document.getElementById("download-status").classList.remove("hidden");
    selectedModel = document.getElementById("model-selection").value;
    const config = {
      temperature: 1.0,
      top_p: 1
    };
    await engine.reload(selectedModel, config);
    document.getElementById("selected-model").textContent = selectedModel;
    document.getElementById("start_button").disabled = false;
    document.getElementById("configuration").classList.remove("hidden");
  }

  async function streamingGenerating(messages, onUpdate, onFinish, onError) {
    try {
      let curMessage = "";
      const completion = await engine.chat.completions.create({
        stream: true,
        messages
      });
      for await (const chunk of completion) {
        const curDelta = chunk.choices[0].delta.content;
        if (curDelta) {
          curMessage += curDelta;
        }
        onUpdate(curMessage);
      }
      const finalMessage = await engine.getMessage();
      onFinish(finalMessage);
    } catch (err) {
      onError(err);
    }
  }

  function appendMessage(message) {
    const chatBox = document.getElementById("chat-box");
    const container = document.createElement("div");
    container.classList.add("message-container");
    const newMessage = document.createElement("div");
    newMessage.classList.add("message");
    newMessage.textContent = message.content;

    if (message.role === "user") {
      container.classList.add("user");
    } else {
      container.classList.add("assistant");
    }

    container.appendChild(newMessage);
    chatBox.appendChild(container);
    chatBox.scrollTop = chatBox.scrollHeight;

    // If the message is from the assistant and not a placeholder, trigger TTS
    if (message.role === "assistant" && message.content !== "typing...") {
      speak(message.content);
    }
  }

  function updateLastMessage(content) {
    const messageDoms = document.getElementById("chat-box").querySelectorAll(".message");
    const lastMessageDom = messageDoms[messageDoms.length - 1];
    lastMessageDom.textContent = content;
  }

  function onSpeechRecognized(transcript) {
    const input = transcript.trim();
    const message = {
      content: input,
      role: "user"
    };
    if (input.length === 0) {
      return;
    }
    document.getElementById("start_button").disabled = true;

    messages.push(message);
    appendMessage(message);

    // Append "typing..." placeholder
    const aiPlaceholder = {
      content: "typing...",
      role: "assistant"
    };
    appendMessage(aiPlaceholder);

    const onFinishGenerating = (finalMessage) => {
      // Remove the "typing..." placeholder
      const chatBox = document.getElementById("chat-box");
      const lastMessageContainer = chatBox.lastElementChild;
      if (lastMessageContainer && lastMessageContainer.querySelector(".message").textContent === "typing...") {
        chatBox.removeChild(lastMessageContainer);
      }

      // Append the final message
      const aiMessage = {
        content: finalMessage,
        role: "assistant"
      };
      appendMessage(aiMessage);

      document.getElementById("start_button").disabled = false;
      engine.runtimeStatsText().then((statsText) => {
        document.getElementById("chat-stats").classList.remove("hidden");
        document.getElementById("chat-stats").textContent = statsText;
      });
    };

    streamingGenerating(
      messages,
      updateLastMessage,
      onFinishGenerating,
      console.error
    );
  }

  // Speech recognition code
  var recognizing = false;
  var ignore_onend;
  var final_transcript = '';
  var recognition;

  function startButton(event) {
    if (recognizing) {
      recognition.stop();
      return;
    }
    final_transcript = '';
    recognition.lang = 'en-US';
    recognition.start();
    ignore_onend = false;
    document.getElementById("start_button").classList.add("mic-animate");
  }

  if (!('webkitSpeechRecognition' in window)) {
    alert("Web Speech API is not supported by this browser.");
  } else {
    recognition = new webkitSpeechRecognition();
    recognition.continuous = false; // Non-continuous recognition
    recognition.interimResults = false; // Get only final results

    recognition.onstart = function() {
      recognizing = true;
    };

    recognition.onerror = function(event) {
      if (event.error == 'no-speech') {
        document.getElementById("start_button").classList.remove("mic-animate");
        alert('No speech was detected.');
        ignore_onend = true;
      }
      if (event.error == 'audio-capture') {
        document.getElementById("start_button").classList.remove("mic-animate");
        alert('No microphone was found.');
        ignore_onend = true;
      }
      if (event.error == 'not-allowed') {
        alert('Permission to use microphone was denied.');
        ignore_onend = true;
      }
    };

    recognition.onend = function() {
      recognizing = false;
      document.getElementById("start_button").classList.remove("mic-animate");
      if (ignore_onend) {
        return;
      }
      if (!final_transcript) {
        return;
      }
      // Process the final transcript
      onSpeechRecognized(final_transcript);
    };

    recognition.onresult = function(event) {
      for (var i = event.resultIndex; i < event.results.length; ++i) {
        if (event.results[i].isFinal) {
          final_transcript += event.results[i][0].transcript;
        }
      }
      final_transcript = final_transcript.trim();
    };
  }

  document.getElementById("start_button").addEventListener("click", function(event) {
    startButton(event);
  });

  // Initialize model selection
  availableModels.forEach((modelId) => {
    const option = document.createElement("option");
    option.value = modelId;
    option.textContent = modelId;
    document.getElementById("model-selection").appendChild(option);
  });
  document.getElementById("model-selection").value = selectedModel;
  document.getElementById("download").addEventListener("click", function () {
    initializeWebLLMEngine().then(() => {
      document.getElementById("start_button").disabled = false;
    });
  });

  document.getElementById("clear-logs").addEventListener("click", function () {
    document.getElementById("logs").innerHTML = '';
  });

  // ===== TTS Integration =====

  // Initialize Speech Synthesis
  let speech = new SpeechSynthesisUtterance();
  speech.lang = "en";

  let voices = [];
  window.speechSynthesis.onvoiceschanged = () => {
    voices = window.speechSynthesis.getVoices();
    populateVoices();
  };

  function populateVoices() {
    const voiceSelect = document.getElementById("voices");
    voiceSelect.innerHTML = ''; // Clear existing options
    voices.forEach((voice, i) => {
      const option = new Option(voice.name, i);
      voiceSelect.appendChild(option);
    });
    if (voices.length > 0) {
      speech.voice = voices[0];
    }
  }

  // Voice Selection Event Listener
  document.getElementById("voices").addEventListener("change", () => {
    const selectedVoiceIndex = document.getElementById("voices").value;
    speech.voice = voices[selectedVoiceIndex];
  });

  // Function to speak text
  function speak(text) {
    if (window.speechSynthesis.speaking) {
      window.speechSynthesis.cancel(); // Cancel previous speech
    }
    speech.text = text;
    window.speechSynthesis.speak(speech);
  }
</script>

</body>
</html>