Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>MeetGenius AI – Enterprise Intelligence</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class' | |
| } | |
| </script> | |
| </head> | |
| <body class="min-h-screen px-6 py-14 | |
| bg-gradient-to-br | |
| from-indigo-100 via-slate-100 to-sky-100 | |
| dark:from-slate-950 dark:via-indigo-950 dark:to-slate-900 | |
| transition-colors duration-300"> | |
| <!-- ===== THEME TOGGLE ===== --> | |
| <div class="fixed top-6 right-6 z-50"> | |
| <button id="themeToggle" | |
| class="w-11 h-11 rounded-full flex items-center justify-center | |
| bg-white/70 dark:bg-slate-800/70 | |
| backdrop-blur text-slate-800 dark:text-white | |
| shadow-lg hover:scale-105 transition"> | |
| 🌙 | |
| </button> | |
| </div> | |
| <!-- ===== HEADER ===== --> | |
| <div class="max-w-6xl mx-auto grid md:grid-cols-2 gap-12 items-center mb-16"> | |
| <!-- LEFT INFO --> | |
| <div class="text-slate-800 dark:text-slate-200"> | |
| <h1 class="text-4xl font-bold mb-4">🏢 MeetGenius AI</h1> | |
| <p class="text-slate-600 dark:text-slate-400 mb-6 leading-relaxed"> | |
| Enterprise-grade AI that converts meetings into structured, | |
| executive-ready intelligence. | |
| </p> | |
| <ul class="space-y-2"> | |
| <li>✔ Executive Summary</li> | |
| <li>✔ Full Notes</li> | |
| <li>✔ AI Conclusion</li> | |
| <li>✔ Word & PDF Export</li> | |
| <li>✔ RAG-based Q&A</li> | |
| </ul> | |
| <a href="/" class="inline-block mt-6 text-indigo-600 dark:text-indigo-400 hover:underline"> | |
| ⬅ Switch to YouTube Mode | |
| </a> | |
| </div> | |
| <!-- UPLOAD CARD --> | |
| <div class="bg-white/70 dark:bg-slate-900/60 | |
| backdrop-blur-xl | |
| border border-white/40 dark:border-slate-700/60 | |
| rounded-2xl shadow-2xl p-8"> | |
| <h2 class="text-2xl font-semibold text-center mb-6 text-slate-900 dark:text-white"> | |
| Upload Meeting Recording | |
| </h2> | |
| <form method="POST" enctype="multipart/form-data"> | |
| <input type="file" name="meeting_file" required | |
| class="block w-full mb-6 text-sm | |
| text-slate-700 dark:text-slate-300"> | |
| <button type="submit" | |
| class="w-full py-3 rounded-xl font-medium text-white | |
| bg-gradient-to-r from-indigo-600 to-blue-600 | |
| hover:opacity-90 transition"> | |
| ⚡ Generate Intelligence | |
| </button> | |
| </form> | |
| </div> | |
| </div> | |
| <!-- ===== OUTPUT ===== --> | |
| <div class="max-w-5xl mx-auto space-y-10"> | |
| {% if summary %} | |
| <div class="bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl | |
| border-l-4 border-indigo-500 | |
| rounded-2xl shadow-xl p-8"> | |
| <h3 class="font-semibold mb-3 text-lg">📌 Executive Summary</h3> | |
| <pre class="whitespace-pre-wrap text-slate-700 dark:text-slate-300">{{ summary }}</pre> | |
| </div> | |
| {% endif %} | |
| {% if transcript %} | |
| <div class="bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl | |
| border-l-4 border-green-500 | |
| rounded-2xl shadow-xl p-8"> | |
| <h3 class="font-semibold mb-3 text-lg">📄 Full Meeting Notes</h3> | |
| <pre class="whitespace-pre-wrap text-slate-700 dark:text-slate-300">{{ transcript }}</pre> | |
| </div> | |
| {% endif %} | |
| {% if conclusion %} | |
| <div class="bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl | |
| border-l-4 border-yellow-500 | |
| rounded-2xl shadow-xl p-8"> | |
| <h3 class="font-semibold mb-3 text-lg">✅ AI Conclusion</h3> | |
| <pre class="whitespace-pre-wrap text-slate-700 dark:text-slate-300">{{ conclusion }}</pre> | |
| <!-- DOWNLOAD --> | |
| <div class="flex gap-4 justify-center mt-6"> | |
| <a href="/download/word"> | |
| <button class="px-6 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"> | |
| 📄 Word | |
| </button> | |
| </a> | |
| <a href="/download/pdf"> | |
| <button class="px-6 py-2 rounded-lg bg-emerald-600 text-white hover:bg-emerald-700"> | |
| </button> | |
| </a> | |
| </div> | |
| </div> | |
| {% endif %} | |
| {% if transcript %} | |
| <div class="bg-white/70 dark:bg-slate-900/60 backdrop-blur-xl | |
| border-l-4 border-pink-500 | |
| rounded-2xl shadow-xl p-8"> | |
| <h3 class="font-semibold mb-4 text-lg">🔍 Ask Questions (RAG)</h3> | |
| <div class="flex gap-3"> | |
| <input id="rag_question" placeholder="Ask a question…" | |
| class="flex-1 px-4 py-2 rounded-lg | |
| bg-white/80 dark:bg-slate-800/70 | |
| border border-slate-300 dark:border-slate-600"> | |
| <button onclick="askRAG()" | |
| class="px-6 py-2 rounded-lg bg-pink-600 text-white"> | |
| Ask | |
| </button> | |
| </div> | |
| <div id="rag_answer" | |
| class="hidden mt-4 p-4 rounded-lg | |
| bg-white/80 dark:bg-slate-800/70 | |
| whitespace-pre-wrap"> | |
| </div> | |
| </div> | |
| {% endif %} | |
| </div> | |
| <!-- ===== SCRIPT ===== --> | |
| <script> | |
| const toggleBtn = document.getElementById("themeToggle"); | |
| const html = document.documentElement; | |
| toggleBtn.onclick = () => { | |
| html.classList.toggle("dark"); | |
| toggleBtn.textContent = html.classList.contains("dark") ? "🌙" : "☀️"; | |
| }; | |
| function askRAG(){ | |
| const q = document.getElementById("rag_question").value.trim(); | |
| if(!q) return; | |
| fetch("/ask", { | |
| method: "POST", | |
| headers: {"Content-Type":"application/x-www-form-urlencoded"}, | |
| body: "question=" + encodeURIComponent(q) | |
| }) | |
| .then(r=>r.json()) | |
| .then(d=>{ | |
| const box = document.getElementById("rag_answer"); | |
| box.classList.remove("hidden"); | |
| box.textContent = d.answer; | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> | |