Spaces:

adaptsum
/

demo

Runtime error

App Files Files Community

chansung commited on Feb 27

Commit

013949c

verified ·

1 Parent(s): fd94a95

Upload folder using huggingface_hub

Browse files

Files changed (2) hide show

README.md +24 -0
ui-temp.html +819 -0

README.md CHANGED Viewed

@@ -203,3 +203,27 @@ $ python main.py # or gradio main.py
 # Acknowledgments
 This is a project built during the Vertex sprints held by Google's ML Developer Programs team. We are thankful to be granted good amount of GCP credits to do this project.

 # Acknowledgments
 This is a project built during the Vertex sprints held by Google's ML Developer Programs team. We are thankful to be granted good amount of GCP credits to do this project.
+# AdaptSum
+AdaptSum stands for Adaptive Summarization. This project focuses on developing an LLM-powered system for dynamic summarization. Instead of generating entirely new summaries with each update, the system intelligently identifies and modifies only the necessary parts of the existing summary. This approach aims to create a more efficient and fluid summarization process within a continuous chat interaction with an LLM.
+# Instructions
+1. Install dependencies
+```shell
+$ pip install requirements.txt
+```
+2. Setup Gemini API Key
+```shell
+$ export GEMINI_API_KEY=xxxxx
+```
+> note that GEMINI API KEY should be obtained from Google AI Studio. Vertex AI is not supported at the moment (this is because Gemini SDK does not provide file uploading functionality for Vertex AI usage now).
+3. Run Gradio app
+```shell
+$ python main.py # or gradio main.py
+```
+# Acknowledgments
+This is a project built during the Vertex sprints held by Google's ML Developer Programs team. We are thankful to be granted good amount of GCP credits to do this project.

ui-temp.html ADDED Viewed

	@@ -0,0 +1,819 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Chat UI with Per‑Session Summary, Settings & History</title>
+  <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
+  <!-- Include marked.js for Markdown rendering -->
+  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+  <style>
+    /* Global Styles */
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      padding: 0;
+      font-family: 'Poppins', sans-serif;
+      background: #e0e0e0;
+      overflow: hidden;
+    }
+    /* Overall App Container: Left Nav and Chat Area */
+    .app-container {
+      display: flex;
+      width: 100vw;
+      height: 100vh;
+    }
+    /* Left Navigation Bar for Chat History */
+    .nav-bar {
+      width: 250px;
+      background: #ffffff;
+      padding: 20px;
+      box-shadow: 2px 0 12px rgba(0,0,0,0.1);
+      overflow-y: auto;
+    }
+    .nav-bar h3 {
+      margin-top: 0;
+      font-size: 1.3em;
+    }
+    .nav-bar ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+    }
+    .nav-bar li {
+      padding: 10px;
+      margin-bottom: 10px;
+      background: #fff;
+      border-radius: 8px;
+      cursor: pointer;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      transition: background 0.3s;
+      font-size: 1.1em;
+    }
+    .nav-bar li.active,
+    .nav-bar li:hover {
+      background: #667eea;
+      color: #fff;
+    }
+    .nav-bar li button.remove-session {
+      background: transparent;
+      border: none;
+      color: inherit;
+      font-size: 1em;
+      cursor: pointer;
+    }
+    .new-session-btn {
+      width: 100%;
+      padding: 10px;
+      background: #667eea;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      font-size: 1.1em;
+      margin-top: 10px;
+    }
+    /* Chat Wrapper */
+    .chat-wrapper {
+      flex: 1;
+      background: #fff;
+      margin: 20px;
+      border-radius: 20px;
+      box-shadow: 0 12px 40px rgba(0,0,0,0.15);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      position: relative;
+    }
+    /* Top Buttons for Overlays */
+    .top-buttons {
+      position: absolute;
+      top: 20px;
+      left: 50%;
+      transform: translateX(-50%);
+      display: flex;
+      gap: 10px;
+      z-index: 15;
+    }
+    .top-button {
+      height: 40px;
+      background: #667eea;
+      color: #fff;
+      border: none;
+      border-radius: 20px;
+      cursor: pointer;
+      box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 1.1em;
+      text-transform: uppercase;
+      padding: 0 20px;
+    }
+    .top-button:hover { background: #556cd6; }
+    /* Turn Label */
+    #turnLabel {
+      position: absolute;
+      top: 20px;
+      right: 20px;
+      background: #ff9800;
+      color: #fff;
+      padding: 5px 10px;
+      border-radius: 10px;
+      font-size: 1em;
+      z-index: 15;
+    }
+    /* Carousel Area */
+    .carousel-wrapper {
+      position: relative;
+      flex: 1;
+      background: #F9FBFD;
+      overflow: hidden;
+      margin-top: 80px;
+    }
+    .carousel {
+      display: flex;
+      height: 100%;
+      transition: transform 0.5s ease;
+    }
+    .card {
+      min-width: 100%;
+      height: 100%;
+      padding: 90px 30px 30px 30px;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+    }
+    .conversation {
+      display: flex;
+      flex-direction: column;
+      gap: 15px;
+    }
+    /* Message Bubbles */
+    .message {
+      padding: 10px 16px;
+      border-radius: 16px;
+      font-size: 1em;
+      line-height: 1.5;
+      max-width: 95%;
+      position: relative;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
+      transition: background 0.3s, transform 0.3s;
+    }
+    .user { background: #F0F4FF; border: 1px solid #D9E2FF; align-self: flex-start; }
+    .ai { background: #FFF4E6; border: 1px solid #FFE0B2; align-self: flex-end; }
+    .message-text {
+      display: block;
+      max-height: 80px;
+      overflow: hidden;
+      transition: max-height 0.3s ease;
+    }
+    .message.expanded .message-text { max-height: none; }
+    .toggle-btn {
+      background: none;
+      border: none;
+      color: #667eea;
+      cursor: pointer;
+      font-size: 0.85em;
+      margin-top: 4px;
+      padding: 0;
+    }
+    .vertical-file-list {
+      margin-bottom: 10px;
+      display: flex;
+      flex-direction: column;
+      gap: 5px;
+    }
+    .file-item-vertical {
+      background: #eaeaea;
+      padding: 5px 8px;
+      border-radius: 4px;
+      font-size: 0.9em;
+    }
+    /* Navigation Buttons */
+    .nav {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 50px;
+      height: 50px;
+      background: rgba(255,255,255,0.5);
+      backdrop-filter: blur(4px);
+      border: none;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      z-index: 10;
+      transition: transform 0.3s, background 0.3s;
+    }
+    .nav:hover { transform: translateY(-50%) scale(1.1); background: rgba(255,255,255,0.8); }
+    .nav:disabled { opacity: 0.5; cursor: default; }
+    #prevBtn { left: 15px; }
+    #nextBtn { right: 15px; }
+    /* Input Section */
+    .input-container {
+      padding: 20px;
+      background: #FAFAFA;
+      border-top: 1px solid #EEE;
+      display: flex;
+      flex-direction: column;
+    }
+    .file-attachments {
+      display: flex;
+      gap: 10px;
+      overflow-x: auto;
+      padding-bottom: 10px;
+      scrollbar-width: thin;
+    }
+    .file-item {
+      flex: 0 0 auto;
+      background: #eee;
+      padding: 5px 10px;
+      border-radius: 5px;
+      display: flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 0.9em;
+    }
+    .file-item button {
+      background: none;
+      border: none;
+      color: #667eea;
+      cursor: pointer;
+      font-size: 1em;
+    }
+    .input-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .attach-button {
+      background: #fff;
+      border: 1px solid #DDD;
+      border-radius: 4px;
+      padding: 8px 12px;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+    .attach-button:hover { background: #f0f0f0; }
+    .input-container textarea {
+      flex: 1;
+      padding: 12px 15px;
+      font-size: 1em;
+      border: 1px solid #DDD;
+      border-radius: 8px;
+      outline: none;
+      resize: none;
+      overflow-y: auto;
+      min-height: 36px;
+      max-height: 150px;
+      line-height: 1.4em;
+      white-space: pre-wrap;
+      transition: border-color 0.3s;
+    }
+    .input-container textarea:focus { border-color: #667eea; }
+    .input-container button {
+      padding: 12px 20px;
+      font-size: 1em;
+      background: #667eea;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 0.3s;
+    }
+    .input-container button:hover { background: #556cd6; }
+    #fileInput { display: none; }
+    /* Summary Overlay Panel (Per‑Session) */
+    #summaryOverlay {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 60%;
+      background: #fff;
+      box-shadow: -4px 0 12px rgba(0,0,0,0.15);
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+    }
+    #summaryOverlay.active { transform: translateX(0); }
+    .summary-header {
+      padding: 16px;
+      background: #667eea;
+      color: #fff;
+      font-size: 1.2em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .summary-header-buttons {
+      display: flex;
+      gap: 10px;
+    }
+    .download-summary {
+      background: #fff;
+      color: #667eea;
+      border: 1px solid #667eea;
+      border-radius: 4px;
+      padding: 4px 8px;
+      cursor: pointer;
+    }
+    .download-summary:hover { background: #667eea; color: #fff; }
+    .close-summary {
+      background: none;
+      border: none;
+      color: #fff;
+      font-size: 1.2em;
+      cursor: pointer;
+    }
+    .summary-content {
+      padding: 16px;
+      overflow-y: auto;
+      flex: 1;
+    }
+    /* Summary content now displays rendered markdown */
+    /* Settings Overlay Panel (Per‑Session) */
+    #settingsOverlay {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 40%;
+      background: #fff;
+      box-shadow: -4px 0 12px rgba(0,0,0,0.15);
+      transform: translateX(100%);
+      transition: transform 0.3s ease;
+      z-index: 20;
+      display: flex;
+      flex-direction: column;
+    }
+    #settingsOverlay.active { transform: translateX(0); }
+    .settings-header {
+      padding: 16px;
+      background: #667eea;
+      color: #fff;
+      font-size: 1.4em;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .close-settings {
+      background: none;
+      border: none;
+      color: #fff;
+      font-size: 1.4em;
+      cursor: pointer;
+    }
+    .settings-content {
+      padding: 16px;
+      overflow-y: auto;
+      flex: 1;
+      font-size: 1.1em;
+      line-height: 1.4;
+    }
+    .settings-group {
+      margin-bottom: 16px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    .settings-group label {
+      min-width: 100px;
+    }
+    .save-settings {
+      background: #667eea;
+      color: #fff;
+      border: none;
+      border-radius: 8px;
+      padding: 10px 20px;
+      cursor: pointer;
+    }
+    .save-settings:hover { background: #556cd6; }
+    /* Responsive */
+    @media (max-width: 600px) {
+      .nav-bar { display: none; }
+      .chat-wrapper { margin: 0; }
+      .message { font-size: 0.95em; max-width: 80%; }
+      .nav { width: 40px; height: 40px; font-size: 1.5em; }
+      .card { padding: 90px 20px 20px 20px; }
+      .input-container { padding: 15px; }
+      .input-row { flex-direction: column; gap: 10px; }
+      .input-container button { width: 100%; }
+      .top-button { font-size: 1em; height: 40px; padding: 0 20px; }
+      #summaryOverlay, #settingsOverlay { width: 80%; }
+    }
+  </style>
+</head>
+<body>
+  <div class="app-container">
+    <!-- Left Nav Bar for Chat History & Session Management -->
+    <div class="nav-bar">
+      <h3>Chat History</h3>
+      <ul id="sessionList"></ul>
+      <button class="new-session-btn" id="newSessionBtn">New Chat</button>
+    </div>
+    <!-- Main Chat Wrapper -->
+    <div class="chat-wrapper">
+      <div class="top-buttons">
+        <button id="summaryBtn" class="top-button">Summary</button>
+        <button id="settingsBtn" class="top-button">Settings</button>
+      </div>
+      <!-- Turn Label -->
+      <div id="turnLabel">Turn: 0/0</div>
+      <div class="carousel-wrapper">
+        <button id="prevBtn" class="nav">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="15 18 9 12 15 6"></polyline>
+          </svg>
+        </button>
+        <div class="carousel" id="carousel">
+          <!-- Conversation cards will be dynamically rendered -->
+        </div>
+        <button id="nextBtn" class="nav">
+          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#444" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+            <polyline points="9 18 15 12 9 6"></polyline>
+          </svg>
+        </button>
+      </div>
+      <!-- Input Section -->
+      <div class="input-container">
+        <div id="fileAttachments" class="file-attachments"></div>
+        <div class="input-row">
+          <button id="attachBtn" class="attach-button">Attach File</button>
+          <input type="file" id="fileInput" multiple accept="image/*,.pdf">
+          <textarea id="chatInput" placeholder="Type your message..."></textarea>
+          <button id="sendBtn">Send</button>
+        </div>
+      </div>
+    </div>
+  </div>
+  <!-- Summary Overlay Panel (Per‑Session, rendered markdown) -->
+  <div id="summaryOverlay">
+    <div class="summary-header">
+      <span>Chat Summary</span>
+      <div class="summary-header-buttons">
+        <button id="downloadSummary" class="download-summary">Download</button>
+        <button class="close-summary" id="closeSummaryBtn">&times;</button>
+      </div>
+    </div>
+    <div class="summary-content" id="summaryContent">
+      <!-- Rendered markdown will appear here -->
+    </div>
+  </div>
+  <!-- Settings Overlay Panel (Per‑Session) -->
+  <div id="settingsOverlay">
+    <div class="settings-header">
+      <span>Settings</span>
+      <button class="close-settings" id="closeSettingsBtn">&times;</button>
+    </div>
+    <div class="settings-content">
+      <form id="settingsForm">
+        <div class="settings-group">
+          <label for="temperature">Temperature:</label>
+          <input type="range" id="temperature" name="temperature" min="0" max="1" step="0.01">
+          <span id="temperatureValue"></span>
+        </div>
+        <div class="settings-group">
+          <label for="maxTokens">Max Tokens:</label>
+          <input type="number" id="maxTokens" name="maxTokens" min="10" max="2048">
+        </div>
+        <div class="settings-group">
+          <label for="persona">Persona:</label>
+          <select id="persona" name="persona">
+            <option value="professional">Professional</option>
+            <option value="friendly">Friendly</option>
+          </select>
+        </div>
+        <button type="button" id="saveSettings" class="save-settings">Save Settings</button>
+      </form>
+    </div>
+  </div>
+  <script>
+    // ----------------- Session Management -----------------
+    let sessions = [];
+    let currentSessionIndex = 0;
+    let currentCardIndex = 0;
+    // Initialize with a default session
+    function initSessions() {
+      sessions.push({
+        id: Date.now(),
+        name: "Chat Session 1",
+        messages: [],
+        summary: "# Chat Summary\n\nThis is the default summary for Chat Session 1.",
+        settings: { temperature: 0.7, maxTokens: 256, persona: "professional" }
+      });
+      currentSessionIndex = 0;
+      currentCardIndex = 0;
+      renderSessionList();
+      renderCurrentSession();
+    }
+    // Render the left nav bar session list
+    function renderSessionList() {
+      const sessionList = document.getElementById('sessionList');
+      sessionList.innerHTML = "";
+      sessions.forEach((session, index) => {
+        const li = document.createElement('li');
+        li.textContent = session.name;
+        li.dataset.index = index;
+        if (index === currentSessionIndex) li.classList.add('active');
+        // Remove button for each session
+        const removeBtn = document.createElement('button');
+        removeBtn.textContent = "×";
+        removeBtn.className = "remove-session";
+        removeBtn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          removeSession(index);
+        });
+        li.appendChild(removeBtn);
+        li.addEventListener('click', () => {
+          currentSessionIndex = index;
+          currentCardIndex = 0;
+          renderSessionList();
+          renderCurrentSession();
+        });
+        sessionList.appendChild(li);
+      });
+    }
+    // Create a new session
+    document.getElementById('newSessionBtn').addEventListener('click', () => {
+      const newSession = {
+        id: Date.now(),
+        name: "Chat Session " + (sessions.length + 1),
+        messages: [],
+        summary: "# Chat Summary\n\nThis is the default summary for Chat Session " + (sessions.length + 1) + ".",
+        settings: { temperature: 0.7, maxTokens: 256, persona: "professional" }
+      };
+      sessions.push(newSession);
+      currentSessionIndex = sessions.length - 1;
+      currentCardIndex = 0;
+      renderSessionList();
+      renderCurrentSession();
+    });
+    // Remove a session
+    function removeSession(index) {
+      sessions.splice(index, 1);
+      if (sessions.length === 0) {
+        initSessions();
+      } else {
+        if (currentSessionIndex >= sessions.length) {
+          currentSessionIndex = sessions.length - 1;
+        }
+        currentCardIndex = 0;
+      }
+      renderSessionList();
+      renderCurrentSession();
+    }
+    // ----------------- Carousel Rendering -----------------
+    const carousel = document.getElementById('carousel');
+    function renderCurrentSession() {
+      const session = sessions[currentSessionIndex];
+      carousel.innerHTML = "";
+      session.messages.forEach(message => {
+        const card = document.createElement('div');
+        card.className = 'card';
+        let attachmentHTML = "";
+        if (message.attachments && message.attachments.length > 0) {
+          attachmentHTML = `<div class="vertical-file-list">` +
+            message.attachments.map(name => `<div class="file-item-vertical">${name}</div>`).join("") +
+            `</div>`;
+        }
+        card.innerHTML = `
+          <div class="conversation">
+            <div class="message user">
+              ${attachmentHTML}
+              <span class="message-text">User: ${message.userText}</span>
+            </div>
+            <div class="message ai">
+              <span class="message-text">AI: ${message.aiResponse}</span>
+            </div>
+          </div>
+        `;
+        carousel.appendChild(card);
+        processMessagesInContainer(card);
+      });
+      currentCardIndex = session.messages.length > 0 ? session.messages.length - 1 : 0;
+      updateCarousel();
+    }
+    function updateCarousel() {
+      const cards = document.querySelectorAll('.card');
+      carousel.style.transform = `translateX(-${currentCardIndex * 100}%)`;
+      prevBtn.disabled = currentCardIndex === 0;
+      nextBtn.disabled = currentCardIndex === cards.length - 1 || cards.length === 0;
+      updateTurnLabel(cards.length);
+    }
+    function updateTurnLabel(totalCards) {
+      const turnLabel = document.getElementById('turnLabel');
+      turnLabel.textContent = `Turn: ${totalCards ? currentCardIndex + 1 + "/" + totalCards : "0/0"}`;
+    }
+    // ----------------- Message Processing -----------------
+    function processMessage(messageEl) {
+      if (messageEl.dataset.processed) return;
+      const textEl = messageEl.querySelector('.message-text');
+      if (textEl.scrollHeight > 80) {
+        const toggleBtn = document.createElement('button');
+        toggleBtn.className = 'toggle-btn';
+        toggleBtn.textContent = 'Read more';
+        toggleBtn.addEventListener('click', function() {
+          if (messageEl.classList.contains('expanded')) {
+            messageEl.classList.remove('expanded');
+            toggleBtn.textContent = 'Read more';
+          } else {
+            messageEl.classList.add('expanded');
+            toggleBtn.textContent = 'Read less';
+          }
+        });
+        messageEl.appendChild(toggleBtn);
+      }
+      messageEl.dataset.processed = 'true';
+    }
+    function processMessagesInContainer(container) {
+      container.querySelectorAll('.message').forEach(processMessage);
+    }
+    // ----------------- Adding Conversation -----------------
+    const attachedFiles = []; // For demo, store file objects (only names)
+    function addConversation(userText, aiResponse) {
+      const attachmentNames = attachedFiles.map(file => file.name);
+      const message = {
+        userText,
+        aiResponse,
+        attachments: attachmentNames
+      };
+      sessions[currentSessionIndex].messages.push(message);
+      clearFileAttachments();
+      renderCurrentSession();
+    }
+    function clearFileAttachments() {
+      attachedFiles.length = 0;
+      updateFileAttachments();
+    }
+    // ----------------- Event Listeners -----------------
+    const sendBtn = document.getElementById('sendBtn');
+    const chatInput = document.getElementById('chatInput');
+    sendBtn.addEventListener('click', () => {
+      const text = chatInput.value;
+      if (text.trim() !== '') {
+        const aiResponse = "I'm here to help!";
+        addConversation(text, aiResponse);
+        chatInput.value = '';
+        chatInput.style.height = "36px";
+      }
+    });
+    chatInput.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
+        e.preventDefault();
+        sendBtn.click();
+      }
+    });
+    const prevBtn = document.getElementById('prevBtn');
+    const nextBtn = document.getElementById('nextBtn');
+    prevBtn.addEventListener('click', () => {
+      if (currentCardIndex > 0) { currentCardIndex--; updateCarousel(); }
+    });
+    nextBtn.addEventListener('click', () => {
+      const cards = document.querySelectorAll('.card');
+      if (currentCardIndex < cards.length - 1) { currentCardIndex++; updateCarousel(); }
+    });
+    // ----------------- File Attachment Handling -----------------
+    const attachBtn = document.getElementById('attachBtn');
+    const fileInput = document.getElementById('fileInput');
+    const fileAttachments = document.getElementById('fileAttachments');
+    attachBtn.addEventListener('click', () => { fileInput.click(); });
+    fileInput.addEventListener('change', () => {
+      for (const file of fileInput.files) { attachedFiles.push(file); }
+      fileInput.value = "";
+      updateFileAttachments();
+    });
+    function updateFileAttachments() {
+      fileAttachments.innerHTML = "";
+      attachedFiles.forEach((file, index) => {
+        const fileDiv = document.createElement("div");
+        fileDiv.className = "file-item";
+        fileDiv.innerHTML = `<span>${file.name}</span> <button data-index="${index}">&times;</button>`;
+        fileAttachments.appendChild(fileDiv);
+      });
+      document.querySelectorAll(".file-item button").forEach(btn => {
+        btn.addEventListener("click", (e) => {
+          const idx = e.target.getAttribute("data-index");
+          attachedFiles.splice(idx, 1);
+          updateFileAttachments();
+        });
+      });
+    }
+    // ----------------- Summary Overlay (Per‑Session) -----------------
+    const summaryOverlay = document.getElementById('summaryOverlay');
+    const summaryBtn = document.getElementById('summaryBtn');
+    const closeSummaryBtn = document.getElementById('closeSummaryBtn');
+    const summaryContent = document.getElementById('summaryContent');
+    const downloadSummaryBtn = document.getElementById('downloadSummary');
+    summaryBtn.addEventListener('click', (e) => {
+      // Close settings if open
+      settingsOverlay.classList.remove('active');
+      // Load current session's summary and render as markdown
+      summaryContent.innerHTML = marked.parse(sessions[currentSessionIndex].summary);
+      summaryOverlay.classList.toggle('active');
+      e.stopPropagation();
+    });
+    closeSummaryBtn.addEventListener('click', () => { summaryOverlay.classList.remove('active'); });
+    downloadSummaryBtn.addEventListener('click', () => {
+      const blob = new Blob([sessions[currentSessionIndex].summary], { type: "text/markdown" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = "summary.md";
+      a.click();
+      URL.revokeObjectURL(url);
+    });
+    // ----------------- Settings Overlay (Per‑Session) -----------------
+    const settingsOverlay = document.getElementById('settingsOverlay');
+    const settingsBtn = document.getElementById('settingsBtn');
+    const closeSettingsBtn = document.getElementById('closeSettingsBtn');
+    const temperatureInput = document.getElementById('temperature');
+    const temperatureValue = document.getElementById('temperatureValue');
+    const maxTokensInput = document.getElementById('maxTokens');
+    const personaSelect = document.getElementById('persona');
+    const saveSettingsBtn = document.getElementById('saveSettings');
+    settingsBtn.addEventListener('click', (e) => {
+      // Close summary if open
+      summaryOverlay.classList.remove('active');
+      // Load current session's settings
+      const settings = sessions[currentSessionIndex].settings;
+      temperatureInput.value = settings.temperature;
+      temperatureValue.textContent = settings.temperature;
+      maxTokensInput.value = settings.maxTokens;
+      personaSelect.value = settings.persona;
+      settingsOverlay.classList.toggle('active');
+      e.stopPropagation();
+    });
+    closeSettingsBtn.addEventListener('click', () => { settingsOverlay.classList.remove('active'); });
+    temperatureInput.addEventListener('input', () => {
+       temperatureValue.textContent = temperatureInput.value;
+    });
+    saveSettingsBtn.addEventListener('click', () => {
+      sessions[currentSessionIndex].settings = {
+        temperature: parseFloat(temperatureInput.value),
+        maxTokens: parseInt(maxTokensInput.value),
+        persona: personaSelect.value
+      };
+      console.log('Session settings saved:', sessions[currentSessionIndex].settings);
+      settingsOverlay.classList.remove('active');
+    });
+    // ----------------- Auto-Dismiss Overlays on Outside Click -----------------
+    document.addEventListener('click', (e) => {
+      if (summaryOverlay.classList.contains('active') &&
+          !summaryOverlay.contains(e.target) &&
+          e.target !== summaryBtn) {
+        summaryOverlay.classList.remove('active');
+      }
+      if (settingsOverlay.classList.contains('active') &&
+          !settingsOverlay.contains(e.target) &&
+          e.target !== settingsBtn) {
+        settingsOverlay.classList.remove('active');
+      }
+    });
+    // ----------------- Global Keyboard Navigation -----------------
+    document.addEventListener('keydown', (e) => {
+      if (document.activeElement !== chatInput) {
+        if (e.key === 'ArrowLeft' && currentCardIndex > 0) {
+          currentCardIndex--;
+          updateCarousel();
+        } else if (e.key === 'ArrowRight') {
+          const cards = document.querySelectorAll('.card');
+          if (currentCardIndex < cards.length - 1) {
+            currentCardIndex++;
+            updateCarousel();
+          }
+        }
+      }
+    });
+    // ----------------- Initialization -----------------
+    initSessions();
+  </script>
+</body>
+</html>