Upload 18 files

static/css/apps-hub/ai-sidebar.css

@@ -0,0 +1,77 @@
+/* ai-sidebar.css */
+.ai-sidebar__container {
+    display: flex;
+    min-height: 100vh;
+}
+
+.ai-sidebar__sidebar {
+    width: 250px;
+    background-color: #ffffff;
+    padding: 20px;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
+    display: flex;
+    flex-direction: column;
+}
+
+.ai-sidebar__title {
+    font-size: 1.5rem;
+    font-weight: bold;
+    color: #3f72af;
+    margin-bottom: 20px;
+}
+
+.ai-sidebar__app-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+    flex-grow: 1;
+}
+
+.ai-sidebar__app-item {
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    margin-bottom: 10px;
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+}
+
+.ai-sidebar__app-item:hover {
+    background-color: #3f72af;
+    color: white;
+}
+
+.ai-sidebar__app-icon {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 15px;
+    color: white;
+}
+
+.ai-sidebar__app-name {
+    font-weight: 500;
+}
+
+.ai-sidebar__content {
+    flex-grow: 1;
+    padding: 20px;
+}
+
+.ai-sidebar__footer {
+    margin-top: auto;
+}
+
+.ai-sidebar__footer .ai-sidebar__app-item {
+    text-decoration: none;
+    color: inherit;
+}
+
+.ai-sidebar__footer .ai-sidebar__app-icon {
+    width: 40px;
+    height: 40px;
+}

static/css/apps-hub/app-selector.css

@@ -0,0 +1,431 @@
+:root {
+    --bg-color: #f0f4f8;
+    --card-bg: #ffffff;
+    --text-color: #2d3748;
+    --text-secondary: #718096;
+    --accent-color: #3f72af;
+    --accent-hover: #3182ce;
+}
+
+.dark-mode {
+    --bg-color: #1a202c;
+    --card-bg: #2d3748;
+    --text-color: #e2e8f0;
+    --text-secondary: #a0aec0;
+    --accent-color: #4299e1;
+    --accent-hover: #63b3ed;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: var(--bg-color);
+    color: var(--text-color);
+    line-height: 1.6;
+    transition: background-color 0.3s ease, color 0.3s ease;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400' viewBox='0 0 400 400'%3E%3Cg fill='%239C92AC' fill-opacity='0.05'%3E%3Ccircle cx='50' cy='50' r='2'/%3E%3Ccircle cx='150' cy='100' r='3'/%3E%3Ccircle cx='250' cy='50' r='2'/%3E%3Ccircle cx='350' cy='150' r='3'/%3E%3Ccircle cx='300' cy='250' r='2'/%3E%3Ccircle cx='200' cy='300' r='3'/%3E%3Ccircle cx='100' cy='250' r='2'/%3E%3Cpath d='M50 50L150 100L250 50L350 150L300 250L200 300L100 250Z' stroke='%239C92AC' stroke-opacity='0.05' fill='none'/%3E%3C/g%3E%3C/svg%3E");
+}
+
+.dark-mode body {
+    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+}
+
+.background-elements {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: -1;
+    opacity: 0.3;
+}
+
+.background-elements::before,
+.background-elements::after {
+    content: '';
+    position: absolute;
+    width: 400px;
+    height: 400px;
+    border-radius: 50%;
+    background-color: var(--accent-color);
+    filter: blur(150px);
+}
+
+.background-elements::before {
+    top: -200px;
+    left: -200px;
+}
+
+.background-elements::after {
+    bottom: -200px;
+    right: -200px;
+}
+
+.title-bar {
+    background-color: var(--accent-color);
+    color: white;
+    padding: 6rem 0 8rem;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);
+}
+
+.title {
+    font-size: 4.5rem;
+    font-weight: 400;
+    margin-bottom: 0.5rem;
+    text-transform: uppercase;
+    letter-spacing: 4px;
+    position: relative;
+    z-index: 1;
+    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    background: linear-gradient(45deg, #ffffff, #e0e0e0);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    display: inline-block;
+}
+
+.subtitle {
+    font-size: 1.6rem;
+    font-weight: 300;
+    position: relative;
+    z-index: 1;
+    max-width: 600px;
+    margin: 1.5rem auto 0;
+    opacity: 0.9;
+    line-height: 1.4;
+}
+
+.particles {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+.particle {
+    position: absolute;
+    background-color: rgba(255, 255, 255, 0.7);
+    border-radius: 50%;
+    animation: orbit 20s linear infinite;
+}
+
+@keyframes orbit {
+    0% { transform: translate(-50%, -50%) rotate(0deg) translateX(-100px) translateY(200px) rotate(0deg); }
+    25% { transform: translate(-50%, -50%) translateX(100px) rotate(5deg); }
+    50% { transform: translate(-50%, -50%) translateX(200px); }
+    75% { transform: translate(-50%, -50%) translateX(600px); }
+    100% { transform: translate(-50%, -50%) translateX(1000px); }
+}
+
+.particle:nth-child(1) { animation-duration: 15s; }
+.particle:nth-child(2) { animation-duration: 25s; }
+.particle:nth-child(3) { animation-duration: 20s; }
+.particle:nth-child(4) { animation-duration: 30s; }
+.particle:nth-child(5) { animation-duration: 18s; }
+
+.discover-ai-apps {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 4rem 2rem;
+}
+
+.app-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 2.5rem;
+    margin-top: 2rem;
+}
+
+.app-card {
+    background-color: var(--card-bg);
+    border-radius: 20px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
+    padding: 2rem;
+    cursor: pointer;
+    transition: transform 0.3s ease, box-shadow 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.app-card:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+}
+
+.app-icon {
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 1.5rem;
+    transition: transform 0.3s ease;
+}
+
+.app-card:hover .app-icon {
+    transform: scale(1.1);
+}
+
+.app-icon i {
+    font-size: 2.5rem;
+    color: #fff;
+}
+
+.app-name {
+    font-size: 1.8rem;
+    margin-bottom: 1rem;
+    color: var(--accent-color);
+    text-align: center;
+}
+
+.app-description {
+    font-size: 1rem;
+    color: var(--text-secondary);
+    text-align: center;
+    flex-grow: 1;
+}
+
+.app-details {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(10px);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+}
+
+.app-details-content {
+    background-color: var(--card-bg);
+    border-radius: 20px;
+    padding: 3rem;
+    max-width: 600px;
+    width: 90%;
+    position: relative;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.app-details-icon {
+    width: 120px;
+    height: 120px;
+    border-radius: 50%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.app-details-icon i {
+    font-size: 3rem;
+    color: #fff;
+}
+
+.app-details h2 {
+    font-size: 2.5rem;
+    margin-bottom: 1.5rem;
+    color: var(--accent-color);
+    text-align: center;
+}
+
+.app-details p {
+    font-size: 1.1rem;
+    line-height: 1.6;
+    color: var(--text-color);
+    margin-bottom: 2rem;
+    text-align: center;
+}
+
+.close-button {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    font-size: 2rem;
+    background: none;
+    border: none;
+    color: var(--text-secondary);
+    cursor: pointer;
+    transition: transform 0.3s ease, color 0.3s ease;
+}
+
+.close-button:hover {
+    transform: scale(1.1);
+    color: var(--accent-color);
+}
+
+.try-button {
+    display: inline-block;
+    background-color: var(--accent-color);
+    color: #ffffff;
+    padding: 1rem 2rem;
+    border-radius: 30px;
+    text-decoration: none;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: bold;
+}
+
+.try-button:hover {
+    background-color: var(--accent-hover);
+    transform: translateY(-3px);
+}
+
+.fade-enter-active, .fade-leave-active {
+    transition: opacity 0.3s, transform 0.3s;
+}
+
+.fade-enter, .fade-leave-to {
+    opacity: 0;
+    transform: scale(0.95);
+}
+
+.fade-enter-to, .fade-leave {
+    opacity: 1;
+    transform: scale(1);
+}
+
+::-webkit-scrollbar {
+    width: 12px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: var(--accent-color);
+    border-radius: 6px;
+    border: 3px solid var(--bg-color);
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--accent-hover);
+}
+
+.dark-mode-toggle {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 50%;
+    width: 50px;
+    height: 50px;
+    font-size: 1.5rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+    z-index: 1000;
+}
+
+.dark-mode-toggle:hover {
+    background-color: var(--accent-hover);
+}
+
+@media (max-width: 768px) {
+    .title-bar {
+        padding: 4rem 0 6rem;
+    }
+
+    .title {
+        font-size: 3rem;
+        letter-spacing: 2px;
+    }
+
+    .subtitle {
+        font-size: 1.2rem;
+    }
+
+    .app-grid {
+        grid-template-columns: 1fr;
+    }
+
+    .app-card {
+        padding: 1.5rem;
+    }
+
+    .app-name {
+        font-size: 1.5rem;
+    }
+
+    .app-description {
+        font-size: 0.9rem;
+    }
+
+    .app-details-content {
+        padding: 2rem;
+        max-width: 90%;
+    }
+
+    .app-details h2 {
+        font-size: 2rem;
+    }
+}
+
+/* Top buttons for login and dark mode*/
+.top-buttons {
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    display: flex;
+    gap: 10px;
+    z-index: 1000;
+}
+
+.login-button,
+.dark-mode-toggle {
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 25px;
+    padding: 10px 20px;
+    font-size: 1rem;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    height: 40px;
+}
+
+.login-button:hover,
+.dark-mode-toggle:hover {
+    background-color: var(--accent-hover);
+    transform: translateY(-3px);
+}
+
+.login-button i,
+.dark-mode-toggle i {
+    font-size: 1.2rem;
+}
+
+/* Remove the fixed positioning from dark-mode-toggle */
+.dark-mode-toggle {
+    position: static;
+    width: auto;
+}
+
+/* For mobile responsiveness */
+@media (max-width: 768px) {
+    .top-buttons {
+        flex-direction: column;
+        top: 10px;
+        right: 10px;
+    }
+}

static/css/apps-hub/profile-page.css

@@ -0,0 +1,51 @@
+/* profile-page.css */
+.profile-page__container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+    background-color: var(--ai-sidebar-bg-color, #ffffff);
+    border-radius: 8px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.profile-page__title {
+    color: var(--ai-sidebar-text-color, #333333);
+    font-size: 24px;
+    margin-bottom: 20px;
+}
+
+.profile-page__info {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 15px;
+}
+
+.profile-page__info-item {
+    background-color: var(--ai-sidebar-hover-bg-color, #f0f0f0);
+    padding: 10px;
+    border-radius: 4px;
+}
+
+.profile-page__info-label {
+    font-weight: bold;
+    color: var(--ai-sidebar-active-text-color, #007bff);
+}
+
+.profile-page__info-value {
+    color: var(--ai-sidebar-text-color, #333333);
+}
+
+.profile-page__logout-btn {
+    margin-top: 20px;
+    padding: 10px 20px;
+    background-color: var(--ai-sidebar-active-bg-color, #007bff);
+    color: #ffffff;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+.profile-page__logout-btn:hover {
+    background-color: var(--ai-sidebar-hover-bg-color, #0056b3);
+}

static/css/apps-hub/research-pro-style.css

@@ -0,0 +1,238 @@
+:root {
+    --accent-color: #003366; /* Navy blue */
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    line-height: 1.6;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f2f5;
+    color: #333;
+}
+
+#input-container {
+    margin-bottom: 20px;
+    background-color: #ffffff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.button-container {
+    justify-content: space-between;
+    height: 30px;
+}
+
+#output-container {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+#report-container, #sources-container {
+    background-color: #ffffff;
+    padding: 30px;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+textarea {
+    width: 100%;
+    padding: 12px;
+    margin-bottom: 15px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    font-size: 16px;
+    resize: vertical;
+    box-sizing: border-box;
+}
+
+button {
+    padding: 12px 24px;
+    background-color: var(--accent-color);
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 16px;
+    transition: background-color 0.3s;
+}
+
+button:hover {
+    background-color: #002244;
+}
+
+.source-item {
+    margin-bottom: 20px;
+    padding: 15px;
+    background-color: #f9f9f9;
+    border: 1px solid #e0e0e0;
+    border-radius: 8px;
+    position: relative;
+    cursor: pointer;
+    transition: box-shadow 0.3s;
+}
+
+.source-item:hover {
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+}
+
+.source-url {
+    color: var(--accent-color);
+    text-decoration: none;
+    word-break: break-all;
+    font-weight: bold;
+    display: block;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+.source-content {
+    margin-top: 10px;
+    position: relative;
+    overflow: hidden;
+}
+
+.source-snippet {
+    max-height: 150px;
+    overflow: hidden;
+}
+
+.source-full {
+    display: none;
+}
+
+.expand-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 30px;
+    background: linear-gradient(to bottom, rgba(249,249,249,0), rgba(249,249,249,1));
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.expand-indicator::after {
+    content: '▼';
+    font-size: 14px;
+    color: #666;
+}
+
+.expanded .expand-indicator::after {
+    content: '▲';
+}
+
+.source-item:hover .expand-indicator {
+    background: linear-gradient(to bottom, rgba(249,249,249,0), rgba(249,249,249,0.9));
+}
+
+h2 {
+    color: var(--accent-color);
+    border-bottom: 2px solid var(--accent-color);
+    padding-bottom: 10px;
+    margin-top: 0;
+}
+
+@media (min-width: 768px) {
+    #output-container {
+        flex-direction: row;
+    }
+    #report-container {
+        flex: 3;
+    }
+    #sources-container {
+        flex: 2;
+    }
+}
+
+@media (max-width: 767px) {
+    body {
+        padding: 10px;
+    }
+    #input-container, #report-container, #sources-container {
+        padding: 15px;
+    }
+}
+
+.centered-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    min-height: calc(100vh - 40px);
+}
+
+.search-container {
+    display: flex;
+    margin-top: 20px;
+}
+
+.search-container input {
+    width: 500px;
+    padding: 10px 20px;
+    font-size: 16px;
+    border: 1px solid #bfcceb;
+    border-radius: 15px 0 0 15px;
+    outline: none;
+    color: #0e1f4b;
+}
+
+.search-container button {
+    width: 50px;
+    padding: 10px;
+    background: #ffffff;
+    border: none;
+    cursor: pointer;
+    transition: opacity 0.3s ease;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0 15px 15px 0;
+}
+
+.search-container button:hover {
+    opacity: 0.5;
+}
+
+.search-container button svg {
+    width: 24px;
+    height: 24px;
+}
+
+::placeholder {
+    font-style: italic;
+    font: 1em sans-serif;
+    color: #7088c1;
+    opacity: 0.5;
+}
+
+.title {
+    font-weight: 700;
+    font-size: 64px !important;
+    background: linear-gradient(45deg, #3b82f6, #10b981);
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+    text-align: center;
+    margin: 0;
+    padding: 0 0 0.5rem;
+}
+
+.generate-btn {
+    white-space: nowrap;
+}
+
+.download-btn {
+    background-color: #30764c;
+    margin-top: 10px;
+}
+
+.download-btn:hover {
+    background-color: #2c8d55;
+}

static/js/apps-hub/app-selector.js

@@ -0,0 +1,74 @@
+function toggleDarkMode() {
+    document.body.classList.toggle('dark-mode');
+}
+
+new Vue({
+    el: '#app',
+    data: {
+        selectedApp: null,
+        aiApps: [
+            {
+                id: 1,
+                name: 'MindScribe',
+                shortDescription: 'AI-powered journal and mood tracker',
+                longDescription: 'MindScribe is your personal AI therapist and journal. It analyzes your daily entries to provide insights into your emotional well-being and offers personalized suggestions for improving your mental health.',
+                icon: 'fas fa-brain',
+                color: '#FF6B6B',
+                link: '/login'
+            },
+            {
+                id: 2,
+                name: 'EcoSense',
+                shortDescription: 'Smart home energy optimization',
+                longDescription: 'EcoSense uses advanced AI algorithms to optimize your homes energy usage. It learns your habits and adjusts your smart home devices to maximize efficiency without sacrificing comfort.',
+                icon: 'fas fa-leaf',
+                color: '#4ECDC4',
+                link: '/login'
+            },
+            {
+                id: 3,
+                name: 'LinguaGenius',
+                shortDescription: 'AI language learning assistant',
+                longDescription: 'LinguaGenius revolutionizes language learning by adapting to your personal learning style. It creates custom lesson plans, provides real-time pronunciation feedback, and engages you in AI-powered conversations.',
+                icon: 'fas fa-language',
+                color: '#45B7D1',
+                link: '/login'
+            },
+            {
+                id: 4,
+                name: 'NutriAI',
+                shortDescription: 'Personalized nutrition and meal planning',
+                longDescription: 'NutriAI is your personal nutritionist powered by artificial intelligence. It analyzes your dietary preferences, health goals, and biometrics to create tailored meal plans and provide real-time nutritional advice.',
+                icon: 'fas fa-utensils',
+                color: '#FF9FF3',
+                link: '/login'
+            },
+            {
+                id: 5,
+                name: 'CreativeForge',
+                shortDescription: 'AI-assisted creative content generator',
+                longDescription: 'CreativeForge is an AI-powered tool for artists, writers, and musicians. It provides inspiration, generates ideas, and even collaborates with you to create unique pieces of art, stories, or musical compositions.',
+                icon: 'fas fa-paint-brush',
+                color: '#FFC75F',
+                link: '/login'
+            },
+            {
+                id: 6,
+                name: 'SafeGuardAI',
+                shortDescription: 'Intelligent home and personal security',
+                longDescription: 'SafeGuardAI uses advanced computer vision and anomaly detection to keep your home and loved ones safe. It integrates with your existing security systems and provides real-time alerts and recommendations.',
+                icon: 'fas fa-shield-alt',
+                color: '#6A5ACD',
+                link: '/login'
+            }
+        ]
+    },
+    methods: {
+        selectApp(app) {
+            this.selectedApp = app;
+        },
+        closeDetails() {
+            this.selectedApp = null;
+        }
+    }
+});

static/js/apps-hub/app1.js

@@ -0,0 +1,8 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    const session = await checkAuth();
+    if (!session) {
+        redirectToLogin();
+    }
+});
+
+document.getElementById('logoutBtn').addEventListener('click', logout);

static/js/apps-hub/auth.js

@@ -0,0 +1,49 @@
+const client = new Appwrite.Client();
+client.setEndpoint('https://cloud.appwrite.io/v1')
+      .setProject('66c2f6c7000abed7f1f9');
+
+const account = new Appwrite.Account(client);
+
+async function checkAuth() {
+    try {
+        const session = await account.getSession('current');
+        return session;
+    } catch (error) {
+        console.error("Not authenticated", error);
+        return null;
+    }
+}
+
+function redirectToLogin() {
+    window.location.href = '/';
+}
+
+async function logout() {
+    // Show loading indicator
+    const loadingElement = document.createElement('div');
+    loadingElement.textContent = 'Logging out...';
+    document.body.appendChild(loadingElement);
+
+    try {
+        // Set a timeout for the logout process
+        const logoutPromise = account.deleteSession('current');
+        const timeoutPromise = new Promise((_, reject) => 
+            setTimeout(() => reject(new Error('Logout timed out')), 5000) // 5 second timeout
+        );
+
+        await Promise.race([logoutPromise, timeoutPromise]);
+
+        // Perform any client-side cleanup here
+        // For example, clear any local storage items
+        localStorage.clear();
+
+        // Redirect to login page
+        window.location.href = '/';
+    } catch (error) {
+        console.error("Logout failed:", error);
+        alert("Logout failed. Please try again.");
+    } finally {
+        // Remove loading indicator
+        document.body.removeChild(loadingElement);
+    }
+}

static/js/apps-hub/login.js

@@ -0,0 +1,23 @@
+document.getElementById('loginBtn').addEventListener('click', initiateOAuth2Login);
+
+function initiateOAuth2Login() {
+    const success = `${window.location.origin}/research-pro`;
+    const failure = `${window.location.origin}/login`;
+
+    account.createOAuth2Session(
+        'google',
+        success,
+        failure,
+        ['https://www.googleapis.com/auth/userinfo.email',
+         'https://www.googleapis.com/auth/userinfo.profile',
+         'openid']
+    );
+}
+
+// Check if already logged in
+(async function() {
+    const session = await checkAuth();
+    if (session) {
+        window.location.href = '/profile';
+    }
+})();

static/js/apps-hub/profile-page.js

@@ -0,0 +1,48 @@
+// profile-page.js
+document.addEventListener('DOMContentLoaded', async () => {
+    try {
+        const session = await checkAuth();
+        if (!session) {
+            redirectToLogin();
+            return;
+        }
+
+        const user = await account.get();
+        displayProfilePageInfo(user, session);
+    } catch (error) {
+        console.error("Error fetching profile:", error);
+        document.getElementById('profilePageInfo').textContent = 'Error loading profile information.';
+    }
+});
+
+function displayProfilePageInfo(user, session) {
+    const profileInfoElement = document.getElementById('profilePageInfo');
+    profileInfoElement.innerHTML = `
+        <div class="profile-page__info-item">
+            <span class="profile-page__info-label">Name:</span>
+            <span class="profile-page__info-value">${user.name}</span>
+        </div>
+        <div class="profile-page__info-item">
+            <span class="profile-page__info-label">Email:</span>
+            <span class="profile-page__info-value">${user.email}</span>
+        </div>
+        <div class="profile-page__info-item">
+            <span class="profile-page__info-label">User ID:</span>
+            <span class="profile-page__info-value">${user.$id}</span>
+        </div>
+        <div class="profile-page__info-item">
+            <span class="profile-page__info-label">Provider:</span>
+            <span class="profile-page__info-value">${session.provider}</span>
+        </div>
+        <div class="profile-page__info-item">
+            <span class="profile-page__info-label">Provider UID:</span>
+            <span class="profile-page__info-value">${session.providerUid}</span>
+        </div>
+        <div class="profile-page__info-item">
+            <span class="profile-page__info-label">Session Expires:</span>
+            <span class="profile-page__info-value">${new Date(session.expire).toLocaleString()}</span>
+        </div>
+    `;
+}
+
+document.getElementById('profilePageLogoutBtn').addEventListener('click', logout);

static/js/apps-hub/profile.js

@@ -0,0 +1,29 @@
+document.addEventListener('DOMContentLoaded', async () => {
+    try {
+        const session = await checkAuth();
+        if (!session) {
+            redirectToLogin();
+            return;
+        }
+
+        const user = await account.get();
+        displayProfileInfo(user, session);
+    } catch (error) {
+        console.error("Error fetching profile:", error);
+        document.getElementById('profileInfo').textContent = 'Error loading profile information.';
+    }
+});
+
+function displayProfileInfo(user, session) {
+    const profileInfoElement = document.getElementById('profileInfo');
+    profileInfoElement.innerHTML = `
+        <p><strong>Name:</strong> ${user.name}</p>
+        <p><strong>Email:</strong> ${user.email}</p>
+        <p><strong>User ID:</strong> ${user.$id}</p>
+        <p><strong>Provider:</strong> ${session.provider}</p>
+        <p><strong>Provider UID:</strong> ${session.providerUid}</p>
+        <p><strong>Session Expires:</strong> ${new Date(session.expire).toLocaleString()}</p>
+    `;
+}
+
+document.getElementById('logoutBtn').addEventListener('click', logout);

static/js/apps-hub/research-pro.js

@@ -0,0 +1,282 @@
+async function generateReport() {
+    const description = document.getElementById('description').value || document.getElementById('description-textarea').value;
+    document.getElementById('initial-view').style.display = 'none';
+    document.getElementById('report-view').style.display = 'block';
+    document.getElementById('description-textarea').value = description;
+    const reportContainer = document.getElementById('report-container');
+    const sourcesContainer = document.getElementById('sources-container');
+    const downloadBtn = document.getElementById('downloadBtn');
+    reportContainer.innerHTML = 'Generating report...';
+    sourcesContainer.innerHTML = '';
+    downloadBtn.style.display = 'none';
+
+    try {
+        const response = await fetch('https://pvanand-search-generate-prod.hf.space/generate_report', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'text/plain'
+            },
+            body: JSON.stringify({
+                description: description,
+                user_id: "",
+                user_name: "multi-agent-research",
+                internet: true,
+                output_format: "report_table",
+                data_format: "Structured data",
+                generate_charts: true,
+                output_as_md: true
+            })
+        });
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+
+        const reader = response.body.getReader();
+        const decoder = new TextDecoder();
+        let markdown = '';
+        let metadata = '';
+        let isReadingMetadata = false;
+
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done) break;
+            
+            const chunk = decoder.decode(value, { stream: true });
+            
+            if (chunk.includes('<report-metadata>')) {
+                isReadingMetadata = true;
+                metadata = '';
+            }
+            
+            if (isReadingMetadata) {
+                metadata += chunk;
+                if (chunk.includes('</report-metadata>')) {
+                    isReadingMetadata = false;
+                    processMetadata(metadata);
+                }
+            } else {
+                markdown += chunk;
+                renderMarkdown(markdown);
+            }
+        }
+
+        // Show the download button after the report is generated
+        downloadBtn.style.display = 'inline-block';
+    } catch (error) {
+        reportContainer.innerHTML = `Error generating report: ${error.message}`;
+    }
+}
+
+function renderMarkdown(markdown) {
+    const reportContainer = document.getElementById('report-container');
+    const previousHeight = reportContainer.scrollHeight;
+    const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
+    
+    if (reportContent) {
+        reportContainer.innerHTML = marked.parse(reportContent[1]);
+    } else {
+        reportContainer.innerHTML = marked.parse(markdown);
+    }
+    
+    const scripts = reportContainer.getElementsByTagName('script');
+    Array.from(scripts).forEach(script => {
+        const newScript = document.createElement('script');
+        newScript.textContent = script.textContent;
+        script.parentNode.replaceChild(newScript, script);
+    });
+
+    // Make Plotly charts responsive
+    const plots = reportContainer.querySelectorAll('.js-plotly-plot');
+    plots.forEach(plot => {
+        Plotly.Plots.resize(plot);
+    });
+
+    // Scroll to new content
+    scrollToNewContent(previousHeight);
+}
+
+function processMetadata(metadata) {
+    const sourcesContainer = document.getElementById('sources-container');
+    const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
+    
+    if (metadataMatch) {
+        const metadataObj = JSON.parse(metadataMatch[1]);
+        
+        sourcesContainer.innerHTML = '<h2>Sources</h2>';
+        metadataObj.forEach(([content, url]) => {
+            if (content.trim() !== "") {
+                const sourceItem = document.createElement('div');
+                sourceItem.className = 'source-item';
+                const snippet = content.length > 400 ? content.substring(0, 400) + '...' : content;
+                sourceItem.innerHTML = `
+                    <a href="${url}" target="_blank" class="source-url">${url}</a>
+                    <div class="source-content">
+                        <div class="source-snippet">${marked.parse(snippet)}</div>
+                        <div class="source-full">${marked.parse(content)}</div>
+                        <div class="expand-indicator"></div>
+                    </div>
+                `;
+                sourcesContainer.appendChild(sourceItem);
+                
+                const sourceUrl = sourceItem.querySelector('.source-url');
+                const sourceContent = sourceItem.querySelector('.source-content');
+                const snippetDiv = sourceItem.querySelector('.source-snippet');
+                const fullDiv = sourceItem.querySelector('.source-full');
+                
+                sourceContent.addEventListener('click', function(e) {
+                    if (!sourceItem.classList.contains('expanded')) {
+                        sourceItem.classList.add('expanded');
+                        snippetDiv.style.display = 'none';
+                        fullDiv.style.display = 'block';
+                    } else if (e.clientY > sourceContent.getBoundingClientRect().bottom - 30) {
+                        sourceItem.classList.remove('expanded');
+                        snippetDiv.style.display = 'block';
+                        fullDiv.style.display = 'none';
+                    }
+                });
+                
+                sourceUrl.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                });
+            }
+        });
+    } else {
+        sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
+    }
+}
+
+function scrollToNewContent(previousHeight) {
+    const reportContainer = document.getElementById('report-container');
+    const newHeight = reportContainer.scrollHeight;
+    const scrollDifference = newHeight - previousHeight;
+    
+    if (scrollDifference > 0) {
+        const viewportHeight = window.innerHeight;
+        const currentScrollPosition = window.pageYOffset;
+        const contentBottom = reportContainer.offsetTop + newHeight;
+        
+        // Start scrolling when new content is within 200px of viewport bottom
+        if (contentBottom > currentScrollPosition + viewportHeight - 200) {
+            window.scrollBy({
+                top: scrollDifference,
+                behavior: 'smooth'
+            });
+        }
+    }
+}
+
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+}
+
+async function downloadHTML() {
+try {
+// Fetch the CSS
+const response = await fetch('styles.css');
+let css = await response.text();
+
+// Add styles for expanded sources and body max-width
+css += `
+    body.report-body { 
+        max-width: 804px; 
+        margin: 0 auto; 
+    }
+    .source-item {
+        margin-bottom: 20px;
+    }
+    .source-content {
+        margin-top: 10px;
+    }
+    .source-snippet, .expand-indicator {
+        display: none;
+    }
+    .source-full {
+        display: block;
+    }
+`;
+
+// Clone the document
+const htmlContent = document.implementation.createHTMLDocument('Report');
+
+// Set up the basic structure
+htmlContent.documentElement.lang = 'en';
+const head = htmlContent.head;
+const body = htmlContent.body;
+body.className = 'report-body';
+
+// Add meta tags
+const meta = htmlContent.createElement('meta');
+meta.charset = 'UTF-8';
+head.appendChild(meta);
+
+const viewport = htmlContent.createElement('meta');
+viewport.name = 'viewport';
+viewport.content = 'width=device-width, initial-scale=1.0';
+head.appendChild(viewport);
+
+// Add title
+const title = htmlContent.createElement('title');
+title.textContent = 'Generated Report';
+head.appendChild(title);
+
+// Add style
+const style = htmlContent.createElement('style');
+style.textContent = css;
+head.appendChild(style);
+
+// Add necessary scripts
+const markedScript = htmlContent.createElement('script');
+markedScript.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
+head.appendChild(markedScript);
+
+const plotlyScript = htmlContent.createElement('script');
+plotlyScript.src = 'https://cdn.plot.ly/plotly-latest.min.js';
+head.appendChild(plotlyScript);
+
+// Copy the report content
+const reportContainer = document.getElementById('report-container');
+body.innerHTML = reportContainer.innerHTML;
+
+// Copy and modify the sources content
+const sourcesContainer = document.getElementById('sources-container');
+const sourcesDiv = htmlContent.createElement('div');
+sourcesDiv.innerHTML = sourcesContainer.innerHTML;
+
+// Expand all sources
+const sourceItems = sourcesDiv.querySelectorAll('.source-item');
+sourceItems.forEach(item => {
+    item.classList.add('expanded');
+    const snippetDiv = item.querySelector('.source-snippet');
+    const fullDiv = item.querySelector('.source-full');
+    if (snippetDiv) snippetDiv.style.display = 'none';
+    if (fullDiv) fullDiv.style.display = 'block';
+});
+
+body.appendChild(sourcesDiv);
+
+// Create blob and download
+const blob = new Blob([htmlContent.documentElement.outerHTML], { type: 'text/html' });
+const url = URL.createObjectURL(blob);
+const a = document.createElement('a');
+a.href = url;
+a.download = 'report.html';
+document.body.appendChild(a);
+a.click();
+document.body.removeChild(a);
+URL.revokeObjectURL(url);
+} catch (error) {
+console.error('Error downloading HTML:', error);
+}
+}
+// Make Plotly charts responsive on window resize
+window.addEventListener('resize', function() {
+    const plots = document.querySelectorAll('.js-plotly-plot');
+    plots.forEach(plot => {
+        Plotly.Plots.resize(plot);
+    });
+});

static/js/apps-hub/sidebar-component.js

@@ -0,0 +1,41 @@
+// sidebar-component.js
+const SidebarComponent = {
+  template: `
+    <aside class="ai-sidebar__sidebar">
+      <div class="ai-sidebar__title">AI Apps</div>
+      <ul class="ai-sidebar__app-list">
+        <li v-for="app in apps" :key="app.id" class="ai-sidebar__app-item" @click="navigateToApp(app)">
+          <div class="ai-sidebar__app-icon" :style="{ backgroundColor: app.color }">
+            <i :class="app.icon"></i>
+          </div>
+          <span class="ai-sidebar__app-name">{{ app.name }}</span>
+        </li>
+      </ul>
+      <div class="ai-sidebar__footer">
+        <a href="/profile" class="ai-sidebar__app-item">
+          <div class="ai-sidebar__app-icon" style="backgroundColor: #3f72af">
+            <i class="fas fa-user"></i>
+          </div>
+          <span class="ai-sidebar__app-name">Profile</span>
+        </a>
+      </div>
+    </aside>
+  `,
+  setup() {
+    const apps = Vue.ref([
+      { id: 1, name: 'iResearcher', icon: 'fas fa-flask', color: '#6C5CE7', url: '/research-pro' },
+      { id: 2, name: 'MindScribe', icon: 'fas fa-brain', color: '#FF6B6B', url: '/research-pro' },
+      { id: 3, name: 'LinguaGenius', icon: 'fas fa-language', color: '#45B7D1', url: '/research-pro' },
+      { id: 4, name: 'NutriAI', icon: 'fas fa-utensils', color: '#FF9FF3', url: '/research-pro' },
+    ]);
+    
+    const navigateToApp = (app) => {
+      window.location.href = app.url;
+    };
+    
+    return {
+      apps,
+      navigateToApp
+    };
+  }
+};

templates/apps-hub/app-selector.html

@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Discover AI Apps</title>
+    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="/css/app-selector.css">
+</head>
+<body>
+    <div class="background-elements"></div>
+
+    <div class="top-buttons">
+        <button class="login-button" onclick="window.location.href = '/login'">
+            <i class="fab fa-google"></i> Login
+        </button>
+        <button class="dark-mode-toggle" onclick="toggleDarkMode()">
+            <i class="fas fa-moon"></i>
+        </button>
+    </div>
+    <div id="app">
+        <div class="title-bar">
+            <h1 class="title">DISCOVER AI•APPS</h1>
+            <p class="subtitle">Explore the future of artificial intelligence with our curated collection of cutting-edge AI applications</p>
+            <div class="particles">
+                <div class="particle" style="width: 12px; height: 12px; left: 20%; top: 20%;"></div>
+                <div class="particle" style="width: 18px; height: 18px; left: 40%; top: 30%;"></div>
+                <div class="particle" style="width: 10px; height: 10px; left: 60%; top: 40%;"></div>
+                <div class="particle" style="width: 15px; height: 15px; left: 80%; top: 50%;"></div>
+                <div class="particle" style="width: 8px; height: 8px; left: 30%; top: 60%;"></div>
+            </div>
+        </div>
+        <div class="discover-ai-apps">
+            {% raw %}
+            <div class="app-grid">
+                <div v-for="app in aiApps" :key="app.id" class="app-card" @click="selectApp(app)">
+                    <div class="app-icon" :style="{ backgroundColor: app.color }">
+                        <i :class="app.icon"></i>
+                    </div>
+                    <h2 class="app-name">{{ app.name }}</h2>
+                    <p class="app-description">{{ app.shortDescription }}</p>
+                </div>
+            </div>
+
+            <transition name="fade">
+                <div v-if="selectedApp" class="app-details">
+                    <div class="app-details-content">
+                        <button class="close-button" @click="closeDetails">&times;</button>
+                        <div class="app-details-icon" :style="{ backgroundColor: selectedApp.color }">
+                            <i :class="selectedApp.icon"></i>
+                        </div>
+                        <h2>{{ selectedApp.name }}</h2>
+                        <p>{{ selectedApp.longDescription }}</p>
+                        <a :href="selectedApp.link" class="try-button">Try Now</a>
+                    </div>
+                </div>
+            </transition>
+            {% endraw %}
+        </div>
+    </div>
+    <script src="/js/app-selector.js"></script>
+</body>
+</html>

templates/apps-hub/base.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ title }} - My App</title>
+    <script src="https://cdn.jsdelivr.net/npm/appwrite@15.0.0"></script>
+    <script src="/js/auth.js"></script>
+    <script src="https://cdn.tailwindcss.com"></script>
+</head>
+<body class="bg-gray-100 min-h-screen flex items-center justify-center">
+    <div class="bg-white p-8 rounded-lg shadow-md w-full max-w-md">
+        {% block content %}{% endblock %}
+    </div>
+    {% block scripts %}{% endblock %}
+</body>
+</html>

templates/apps-hub/login.html

@@ -0,0 +1,84 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Login</title>
+    <script src="https://cdn.jsdelivr.net/npm/appwrite@15.0.0"></script>
+    <script src="/js/auth.js"></script>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background: linear-gradient(to right, #4a90e2, #7e57c2);
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+        }
+        .container {
+            background-color: white;
+            padding: 2rem;
+            border-radius: 8px;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            text-align: center;
+            width: 300px;
+        }
+        h1 {
+            color: #333;
+            margin-bottom: 1rem;
+        }
+        p {
+            color: #666;
+            margin-bottom: 1rem;
+        }
+        .spinner {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid #3498db;
+            border-radius: 50%;
+            width: 40px;
+            height: 40px;
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Welcome</h1>
+        <div class="spinner"></div>
+        <p>Logging in with Google...</p>
+        <p style="font-size: 0.9em; color: #888;">Please wait while we redirect you.</p>
+    </div>
+
+    <script>
+        // Check if already logged in
+        (async function() {
+            const session = await checkAuth();
+            if (session) {
+                window.location.href = '/research-pro';
+            } else {
+                initiateOAuth2Login();
+            }
+        })();
+
+        function initiateOAuth2Login() {
+            const success = `${window.location.origin}/research-pro`;
+            const failure = `${window.location.origin}/login`;
+
+            account.createOAuth2Session(
+                'google',
+                success,
+                failure,
+                ['https://www.googleapis.com/auth/userinfo.email',
+                 'https://www.googleapis.com/auth/userinfo.profile',
+                 'openid']
+            );
+        }
+    </script>
+</body>
+</html>

templates/apps-hub/mindscribe.html

@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MindScribe</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="ai-sidebar.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="sidebar-component.js"></script>
+</head>
+<body>
+    <div id="app" class="ai-sidebar__container">
+        <sidebar-component></sidebar-component>
+        <main class="ai-sidebar__content">
+            <h1>MindScribe</h1>
+            <p>Welcome to MindScribe, your AI-powered journal and mood tracker.</p>
+            <!-- Add more HTML content for the MindScribe app here -->
+        </main>
+    </div>
+
+    <script>
+        const { createApp } = Vue;
+
+        const app = createApp({
+            components: {
+                'sidebar-component': SidebarComponent
+            }
+            // Your app-specific Vue code here
+        });
+
+        app.mount('#app');
+    </script>
+</body>
+</html>

templates/apps-hub/profile.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Profile</title>
+    <script src="https://cdn.jsdelivr.net/npm/appwrite@15.0.0"></script>
+    <script src="/js/auth.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="/css/ai-sidebar.css">
+    <link rel="stylesheet" href="/css/profile-page.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="/js/sidebar-component.js"></script>
+</head>
+<body>
+    <div id="app" class="ai-sidebar__container">
+        <sidebar-component></sidebar-component>
+        <main class="ai-sidebar__content">
+            <div class="profile-page__container">
+                <h1 class="profile-page__title">Profile</h1>
+                <div id="profilePageInfo" class="profile-page__info"></div>
+                <button @click="handleLogout" class="profile-page__logout-btn">Logout</button>
+            </div>
+        </main>
+    </div>
+
+    <script src="/js/profile-page.js"></script>
+    <script>
+        const { createApp } = Vue;
+
+        const app = createApp({
+            components: {
+                'sidebar-component': SidebarComponent
+            },
+            methods: {
+                async checkProfileAuthentication() {
+                    const session = await checkAuth();
+                    if (!session) {
+                        redirectToLogin();
+                    }
+                },
+                handleLogout() {
+                    logout();
+                }
+            },
+            mounted() {
+                this.checkProfileAuthentication();
+            }
+        });
+
+        app.mount('#app');
+    </script>
+</body>
+</html>

templates/apps-hub/research-pro.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Research Pro</title>
+    <script src="https://cdn.jsdelivr.net/npm/appwrite@15.0.0"></script>
+    <script src="/js/auth.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
+    <link rel="stylesheet" href="/css/ai-sidebar.css">
+    <link rel="stylesheet" href="/css/research-pro-style.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
+    <script src="/js/sidebar-component.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
+    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <style>
+        #main-container {
+            position: relative;
+            min-height: 100vh;
+        }
+        .button-container {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            justify-content: flex-end;
+            height: 30px;
+        }
+    </style>
+</head>
+<body>
+    <div id="app" class="ai-sidebar__container">
+        <sidebar-component></sidebar-component>
+        <main class="ai-sidebar__content">
+            <div id="main-container">
+                <div id="initial-view" class="centered-container">
+                    <h1 class="title">iResearcher</h1>
+                    <div class="search-container">
+                        <input type="text" id="description" placeholder="Your question/topic...">
+                        <button onclick="generateReport()">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="url(#gradient)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <defs>
+                                    <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                                        <stop offset="0%" stop-color="#3b82f6" />
+                                        <stop offset="100%" stop-color="#10b981" />
+                                    </linearGradient>
+                                </defs>
+                                <circle cx="11" cy="11" r="8"></circle>
+                                <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <!-- This will be shown when a report is generated -->
+                <div id="report-view" style="display: none;">
+                    <div id="input-container" style="display: none;">
+                        <textarea id="description-textarea" rows="1" placeholder="Your question/topics"></textarea>
+                    </div>
+                    <div id="output-container">
+                        <div id="report-container"></div>
+                        <div id="sources-container"></div>
+                    </div>
+                    <div class="button-container">
+                        <button id="downloadBtn" onclick="downloadHTML()" style="display: none;" title="Download HTML Report">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </main>
+    </div>
+    
+    <script src="/js/research-pro.js"></script>
+    <script>
+        const { createApp } = Vue;
+
+        const app = createApp({
+  components: {
+    'sidebar-component': SidebarComponent
+  },
+  methods: {
+    async checkAuthentication() {
+      const session = await checkAuth();
+      if (!session) {
+        redirectToLogin();
+      }
+    }
+  },
+  mounted() {
+    this.checkAuthentication();
+  }
+});
+
+        app.mount('#app');
+    </script>
+</body>
+</html>