Spaces:

dev-jas
/

CodeMind

Running

devjas1 commited on 8 days ago

Commit

6bebf5c

1 Parent(s): 98f6ff9

(UPDATE): [docs(index.html)]: add full landing page for CodeMind AI-powered development assistant

Create a complete HTML landing page for CodeMind, an AI-powered development assistant focused on local document analysis and commit message generation.
Add header navigation with links to Features, Why CodeMind, How It Works, Usage, and Setup sections.
Implement hero section introducing CodeMind, its purpose, and quick access buttons for setup and features.
Document features including document embedding, semantic search, commit message generation, retrieval-augmented generation, local processing, and flexible configuration.
Explain the value proposition in the "Why CodeMind?" section, highlighting efficient knowledge retrieval, smarter git workflow, and AI-powered documentation Q&A.
Detail the workflow in "How It Works" with steps for document indexing, semantic search, retrieval-augmented generation, and commit message generation.
Provide usage examples for indexing documentation, semantic search, asking questions, and generating commit messages via CLI commands.
Outline setup instructions, including prerequisites, installation steps, and model setup guidance.
Add FAQ section addressing model compatibility, RAM requirements, data privacy, and re-indexing frequency.
Include a footer with navigation links and copyright.
Structure the page for clarity, accessibility, and ease of use for new users.

Files changed (2) hide show

index.html +271 -10
style.css +313 -28

index.html CHANGED Viewed

@@ -4,19 +4,280 @@
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
-    <title>My static Space</title>
-    <link rel="stylesheet" href="style.css" rel="noopener" />
 </head>
 <body>
-    <div class="card">
-        <h1>Welcome to your static Space!</h1>
-        <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-        <p>
-            Also don't forget to check the
-            <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spacesedocumentation</a>.
-        </p>
-    </div>
 </body>
 </html>

 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width" />
+    <link rel="stylesheet" href="style.css" />
+    <title>CodeMind - AI-Powered Development Assistant</title>
 </head>
 <body>
+    <!-- Header -->
+    <header>
+        <div class="container">
+            <nav>
+                <div class="logo">
+                    <span class="logo-icon">🔧</span> CodeMind
+                </div>
+                <ul class="nav-links">
+                    <li><a href="#features">Features</a></li>
+                    <li><a href="#why">Why CodeMind</a></li>
+                    <li><a href="#how">How It Works</a></li>
+                    <li><a href="#usage">Usage</a></li>
+                    <li><a href="#setup">Setup</a></li>
+                </ul>
+            </nav>
+        </div>
+    </header>
+    <!-- Hero Section -->
+    <section class="hero">
+        <div class="container">
+            <h1>AI-Powered Development Assistant</h1>
+            <p>CodeMind is an AI-powered development assistant that runs entirely on your local machine for intelligent
+                document analysis and commit message generation.</p>
+            <a href="#setup" class="btn">Get Started</a>
+            <a href="#features" class="btn btn-outline">Learn More</a>
+        </div>
+    </section>
+    <!-- Features Section -->
+    <section id="features" class="features">
+        <div class="container">
+            <h2>Features</h2>
+            <div class="features-grid">
+                <div class="feature-card">
+                    <div class="feature-icon">📄</div>
+                    <h3>Document Embedding</h3>
+                    <p>Using EmbeddingGemma-300m to create semantic representations of your documentation and code.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🔍</div>
+                    <h3>Semantic Search</h3>
+                    <p>Using FAISS for vector similarity search to find relevant content based on meaning, not just
+                        keywords.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">💬</div>
+                    <h3>Commit Message Generation</h3>
+                    <p>Automatically generate descriptive commit messages based on your changes using Phi-2 model.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">🤖</div>
+                    <h3>Retrieval-Augmented Generation</h3>
+                    <p>Answers questions using your indexed document context for accurate, relevant responses.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">💻</div>
+                    <h3>Local Processing</h3>
+                    <p>All AI processing happens on your machine with no data sent to cloud services.</p>
+                </div>
+                <div class="feature-card">
+                    <div class="feature-icon">⚙️</div>
+                    <h3>Flexible Configuration</h3>
+                    <p>Customize models and parameters to suit your specific needs and preferences.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Why Section -->
+    <section id="why" class="why">
+        <div class="container">
+            <h2>Why CodeMind?</h2>
+            <div class="why-content">
+                <p>CodeMind brings together document semantic search, retrieval-augmented Q&A, and AI-powered commit
+                    message generation to help you work faster and smarter by leveraging your own project context.</p>
+                <h3>Efficient Knowledge Retrieval</h3>
+                <p>Makes searching and querying documentation more powerful by using semantic embeddings rather than
+                    keyword search.</p>
+                <h3>Smarter Git Workflow</h3>
+                <p>Automates the creation of meaningful commit messages by analyzing git diffs and using an LLM to
+                    summarize changes.</p>
+                <h3>AI-Powered Documentation</h3>
+                <p>Enables you to ask questions about your project, using your own docs/context rather than just generic
+                    answers.</p>
+            </div>
+        </div>
+    </section>
+    <!-- How It Works -->
+    <section id="how" class="how">
+        <div class="container">
+            <h2>How It Works</h2>
+            <div class="how-steps">
+                <div class="step">
+                    <div class="step-number">1</div>
+                    <div class="step-content">
+                        <h3>Document Indexing</h3>
+                        <p>The app uses EmbeddingGemma-300m via sentence-transformers to embed documents. Embeddings are
+                            normalized and stored in a FAISS vector index for efficient similarity search. Metadata
+                            (document text and filenames) are stored alongside the index.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-number">2</div>
+                    <div class="step-content">
+                        <h3>Semantic Search</h3>
+                        <p>When you search, your query is embedded using the same embedding model. FAISS searches for
+                            the most similar documents based on cosine similarity. Results are filtered by a similarity
+                            threshold and returned with scores.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-number">3</div>
+                    <div class="step-content">
+                        <h3>Retrieval-Augmented Generation (RAG)</h3>
+                        <p>When you ask a question, the system retrieves relevant docs (via semantic search). The
+                            retrieved context is fed to the Phi-2 LLM, which generates an answer using both your
+                            question and the context.</p>
+                    </div>
+                </div>
+                <div class="step">
+                    <div class="step-number">4</div>
+                    <div class="step-content">
+                        <h3>Commit Message Generation</h3>
+                        <p>Analyzes your staged git changes (via a diff analyzer). Summarizes changes and sends them to
+                            the Phi-2 LLM, which generates a commit message aligned to your config (tone, style,
+                            length).</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Usage -->
+    <section id="usage" class="usage">
+        <div class="container">
+            <h2>Usage Examples</h2>
+            <h3>Index Your Documentation</h3>
+            <div class="code-block">
+                <span class="code-comment"># Index documents in the docs directory</span><br>
+                python cli.py init ./docs/
+            </div>
+            <h3>Semantic Search</h3>
+            <div class="code-block">
+                <span class="code-comment"># Search for relevant documentation</span><br>
+                python cli.py search "how to configure the model"
+            </div>
+            <h3>Ask Questions (RAG)</h3>
+            <div class="code-block">
+                <span class="code-comment"># Ask questions about your project</span><br>
+                python cli.py ask "What are the configuration options?"
+            </div>
+            <h3>Generate Commit Messages</h3>
+            <div class="code-block">
+                <span class="code-comment"># Preview a generated commit message</span><br>
+                python cli.py commit --preview<br><br>
+                <span class="code-comment"># Generate and apply commit message</span><br>
+                python cli.py commit --apply
+            </div>
+        </div>
+    </section>
+    <!-- Setup -->
+    <section id="setup" class="setup">
+        <div class="container">
+            <h2>Setup & Installation</h2>
+            <div class="setup-cards">
+                <div class="setup-card">
+                    <h3>Prerequisites</h3>
+                    <ul>
+                        <li>Python 3.8 or higher</li>
+                        <li>8GB+ RAM recommended</li>
+                        <li>4GB+ disk space for model files</li>
+                        <li>Git for repository cloning</li>
+                    </ul>
+                </div>
+                <div class="setup-card">
+                    <h3>Installation</h3>
+                    <div class="code-block">
+                        <span class="code-comment"># Clone the repository</span><br>
+                        git clone https://github.com/devjas1/codemind.git<br>
+                        cd codemind<br><br>
+                        <span class="code-comment"># Create virtual environment</span><br>
+                        python -m venv venv<br><br>
+                        <span class="code-comment"># Activate on macOS/Linux</span><br>
+                        source venv/bin/activate<br><br>
+                        <span class="code-comment"># Install dependencies</span><br>
+                        pip install -r requirements.txt
+                    </div>
+                </div>
+                <div class="setup-card">
+                    <h3>Model Setup</h3>
+                    <p>Download these models:</p>
+                    <ul>
+                        <li>Phi-2 Model for commit message generation</li>
+                        <li>EmbeddingGemma-300m for document embedding</li>
+                    </ul>
+                    <p>Place them in the models/ directory as specified in the configuration.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ -->
+    <section class="faq">
+        <div class="container">
+            <h2>Frequently Asked Questions</h2>
+            <div class="faq-list">
+                <div class="faq-item">
+                    <div class="faq-question">Can I use different models?</div>
+                    <p>Yes, you can use any GGUF-compatible model for generation and any SentenceTransformers-compatible
+                        model for embeddings. Update the paths in config.yaml accordingly.</p>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question">How much RAM do I need?</div>
+                    <p>For the Phi-2 Q4_0 model, 8GB RAM is recommended. Larger models will require more memory.</p>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question">Is my data sent to the cloud?</div>
+                    <p>No, all processing happens locally on your machine. No code or data is sent to external services.
+                    </p>
+                </div>
+                <div class="faq-item">
+                    <div class="faq-question">How often should I re-index my documents?</div>
+                    <p>Re-index whenever your documentation or codebase changes significantly to keep search results
+                        relevant.</p>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Footer -->
+    <footer>
+        <div class="container">
+            <div class="logo">
+                <span class="logo-icon">🔧</span> CodeMind
+            </div>
+            <p>AI-powered development assistant for your local machine</p>
+            <ul class="footer-links">
+                <li><a href="#features">Features</a></li>
+                <li><a href="#why">Why</a></li>
+                <li><a href="#how">How It Works</a></li>
+                <li><a href="#usage">Usage</a></li>
+                <li><a href="#setup">Setup</a></li>
+            </ul>
+            <p>&copy; 2023 CodeMind. All rights reserved.</p>
+        </div>
+    </footer>
 </body>
 </html>

style.css CHANGED Viewed

@@ -1,28 +1,313 @@
-body {
-    padding: 2rem;
-    font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
-}
-h1 {
-    font-size: 16px;
-    margin-top: 0;
-}
-p {
-    color: rgb(107, 114, 128);
-    font-size: 15px;
-    margin-bottom: 10px;
-    margin-top: 5px;
-}
-.card {
-    max-width: 620px;
-    margin: 0 auto;
-    padding: 16px;
-    border: 1px solid lightgray;
-    border-radius: 16px;
-}
-.card p:last-child {
-    margin-bottom: 0;
-}

+        :root {
+            --primary: #6c63ff;
+            --primary-dark: #5651e9;
+            --secondary: #4a4a4a;
+            --light: #f8f9fa;
+            --dark: #212529;
+            --success: #28a745;
+            --info: #17a2b8;
+            --gradient-start: #6c63ff;
+            --gradient-end: #4a43b7;
+        }
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        body {
+            color: var(--dark);
+            line-height: 1.6;
+            background-color: #f9f9f9;
+        }
+        .container {
+            width: 90%;
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 0 15px;
+        }
+        /* Header & Navigation */
+        header {
+            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+            color: white;
+            padding: 1rem 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+        }
+        nav {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+        .logo {
+            font-size: 1.8rem;
+            font-weight: 700;
+            display: flex;
+            align-items: center;
+        }
+        .logo-icon {
+            margin-right: 10px;
+            font-size: 2rem;
+        }
+        .nav-links {
+            display: flex;
+            list-style: none;
+        }
+        .nav-links li {
+            margin-left: 2rem;
+        }
+        .nav-links a {
+            color: white;
+            text-decoration: none;
+            font-weight: 500;
+            transition: opacity 0.3s;
+        }
+        .nav-links a:hover {
+            opacity: 0.8;
+        }
+        /* Hero Section */
+        .hero {
+            background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
+            color: white;
+            padding: 5rem 0;
+            text-align: center;
+        }
+        .hero h1 {
+            font-size: 3rem;
+            margin-bottom: 1rem;
+        }
+        .hero p {
+            font-size: 1.2rem;
+            max-width: 700px;
+            margin: 0 auto 2rem;
+        }
+        .btn {
+            display: inline-block;
+            background: white;
+            color: var(--primary);
+            padding: 0.8rem 1.5rem;
+            border-radius: 30px;
+            text-decoration: none;
+            font-weight: 600;
+            transition: all 0.3s;
+            border: none;
+            cursor: pointer;
+        }
+        .btn:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
+        }
+        .btn-outline {
+            background: transparent;
+            border: 2px solid white;
+            color: white;
+            margin-left: 1rem;
+        }
+        /* Sections */
+        section {
+            padding: 5rem 0;
+        }
+        section h2 {
+            text-align: center;
+            margin-bottom: 3rem;
+            font-size: 2.5rem;
+            color: var(--secondary);
+        }
+        section h3 {
+            margin-bottom: 1rem;
+            color: var(--primary);
+        }
+        /* Features */
+        .features {
+            background-color: white;
+        }
+        .features-grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+        .feature-card {
+            background: var(--light);
+            padding: 2rem;
+            border-radius: 10px;
+            text-align: center;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+            transition: transform 0.3s;
+        }
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+        .feature-icon {
+            font-size: 2.5rem;
+            color: var(--primary);
+            margin-bottom: 1rem;
+        }
+        /* Why Section */
+        .why {
+            background-color: var(--light);
+        }
+        .why-content {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        /* How It Works */
+        .how-steps {
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+            max-width: 900px;
+            margin: 0 auto;
+        }
+        .step {
+            display: flex;
+            align-items: flex-start;
+            gap: 1.5rem;
+        }
+        .step-number {
+            background: var(--primary);
+            color: white;
+            width: 40px;
+            height: 40px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-shrink: 0;
+            font-weight: bold;
+        }
+        .step-content {
+            flex: 1;
+        }
+        /* Usage */
+        .usage {
+            background-color: var(--light);
+        }
+        .code-block {
+            background: #2d2d2d;
+            color: #f8f8f2;
+            padding: 1.5rem;
+            border-radius: 5px;
+            overflow-x: auto;
+            margin: 1.5rem 0;
+            font-family: 'Courier New', monospace;
+        }
+        .code-comment {
+            color: #75715e;
+        }
+        /* Setup */
+        .setup-cards {
+            display: grid;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+            gap: 2rem;
+        }
+        .setup-card {
+            background: white;
+            padding: 2rem;
+            border-radius: 10px;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+        /* FAQ */
+        .faq-list {
+            max-width: 800px;
+            margin: 0 auto;
+        }
+        .faq-item {
+            margin-bottom: 1.5rem;
+            border-bottom: 1px solid #eee;
+            padding-bottom: 1.5rem;
+        }
+        .faq-question {
+            font-weight: 600;
+            margin-bottom: 0.5rem;
+            color: var(--primary);
+        }
+        /* Footer */
+        footer {
+            background: var(--dark);
+            color: white;
+            padding: 3rem 0;
+            text-align: center;
+        }
+        .footer-links {
+            display: flex;
+            justify-content: center;
+            list-style: none;
+            margin: 2rem 0;
+        }
+        .footer-links li {
+            margin: 0 1rem;
+        }
+        .footer-links a {
+            color: white;
+            text-decoration: none;
+        }
+        /* Responsive */
+        @media (max-width: 768px) {
+            .nav-links {
+                display: none;
+            }
+            .hero h1 {
+                font-size: 2.2rem;
+            }
+            .step {
+                flex-direction: column;
+            }
+            .btn {
+                display: block;
+                margin: 0.5rem auto;
+                width: 80%;
+            }
+            .btn-outline {
+                margin-left: 0;
+            }
+        }