Added app files again

.dockerignore

@@ -1,17 +1,29 @@
 .git
 .gitignore
-.vscode
 __pycache__/
 *.py[cod]
 *$py.class
+*.so
+.Python
+env/
+build/
+develop-eggs/
+dist/
+downloads/
+eggs/
+.eggs/
+lib/
+lib64/
+parts/
+sdist/
+var/
+*.egg-info/
+.installed.cfg
+*.egg
 .env
 .venv
-env/
 venv/
 ENV/
-*.log
 .DS_Store
-*.swp
-*.swo
-.ipynb_checkpoints
-.pytest_cache
+.idea/
+.vscode/

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -6,23 +6,21 @@ WORKDIR /app
 RUN apt-get update && apt-get install -y --no-install-recommends \
     ffmpeg \
     build-essential \
-    git \
     && apt-get clean \
     && rm -rf /var/lib/apt/lists/*
 
-# Download NLTK data
-RUN python -m pip install --no-cache-dir nltk
-RUN python -c "import nltk; nltk.download('punkt'); nltk.download('wordnet')"
-
 # Copy requirements first for better caching
 COPY requirements.txt .
 RUN pip install --no-cache-dir -r requirements.txt
 
+# Run NLTK downloads
+RUN python -m nltk.downloader punkt wordnet
+
 # Copy the rest of the application
 COPY . .
 
-# Port for Hugging Face Spaces
+# Expose the port Hugging Face Spaces expects (7860)
 EXPOSE 7860
 
-# Run using Uvicorn
-CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"] 
+# Run using uvicorn
+CMD ["uvicorn", "fastapi_app:app", "--host", "0.0.0.0", "--port", "7860"] 

README-HF.md

@@ -0,0 +1,30 @@
+# Flowify - Audio Transcription & Topic Analysis
+
+Flowify is an AI-powered tool that transcribes audio/video content and automatically identifies topic segments. It creates interactive mindmaps to help users visualize the structure and flow of conversations, presentations, or lectures.
+
+## Demo
+
+Upload a video file, select a transcription model, and click "Transcribe" to start the process. After transcription, click "Analyze Topics" to generate a topic map.
+
+## Features
+
+- Automatic transcription with OpenAI's Whisper models
+- Topic segmentation with hierarchical structure
+- Interactive mindmap visualization
+- Direct links between transcript timestamps and video playback
+
+## API
+
+This Spaces app also provides API endpoints:
+
+- `POST /transcribe`: Transcribe audio from base64-encoded data
+- `POST /analyze`: Analyze transcript to extract topics
+- `POST /check_model`: Check if a model is available
+
+## Technical Details
+
+Built with FastAPI and Hugging Face's Transformers library.
+
+## License
+
+MIT 

README.md

@@ -1,10 +1,52 @@
----
-title: Flowify Api
-emoji: 👁
-colorFrom: red
-colorTo: gray
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Flowify - Audio Transcription & Topic Analysis
+
+![Flowify Demo](https://i.imgur.com/6BEZ7NR.png)
+
+## About
+
+Flowify is an AI-powered tool that transcribes audio/video content and automatically identifies topic segments. It creates interactive mindmaps to help users visualize the structure and flow of conversations, presentations, or lectures.
+
+## Features
+
+- **Audio Transcription**: Powered by OpenAI's Whisper model, providing accurate transcriptions with timestamps
+- **Topic Segmentation**: Automatically identifies topic boundaries and creates hierarchical topic structures
+- **Interactive Visualization**: Generates mindmaps to visualize the structure of the content
+- **Video Integration**: Timestamps in the transcript link directly to the corresponding point in the video
+
+## How to Use
+
+1. **Upload Video**: Upload your video file (supports MP4, WebM, MOV)
+2. **Choose Model**: Select the transcription model (options range from tiny to medium)
+3. **Transcribe**: Start the transcription process
+4. **Analyze**: Generate the topic segmentation and visualization
+5. **Explore**: Navigate through the interactive mindmap and click on nodes to jump to the relevant sections in your video
+
+## Models & Technology
+
+- **Transcription**: OpenAI's Whisper (available in various sizes for speed/accuracy tradeoffs)
+- **Topic Segmentation**: Custom algorithm combining TF-IDF, cosine similarity, and hierarchical clustering
+- **Frontend**: HTML/CSS/JS with a responsive design
+- **Backend**: FastAPI for efficient API endpoints
+
+## API Endpoints
+
+- `POST /transcribe`: Transcribe audio from base64-encoded data
+- `POST /analyze`: Analyze transcript to extract topics
+- `POST /check_model`: Check if a model is available
+
+## Running Locally
+
+```bash
+git clone https://huggingface.co/spaces/YOUR_USERNAME/flowify
+cd flowify
+pip install -r requirements.txt
+uvicorn fastapi_app:app --host 0.0.0.0 --port 7860 --reload
+```
+
+## License
+
+MIT
+
+## Credits
+
+Built using Hugging Face's transformers library and OpenAI's Whisper model.

app.py

@@ -1,15 +0,0 @@
-from fastapi import FastAPI
-import uvicorn
-from app_fastapi import app
-
-# This file is used for Hugging Face Spaces deployment
-# Spaces will automatically detect this app.py file and serve the FastAPI app
-
-# For local development, you can run:
-# uvicorn app_fastapi:app --host 0.0.0.0 --port 8000 
-
-# Hugging Face Spaces expects this variable to be named 'app'
-# Already imported from app_fastapi.py
-
-if __name__ == "__main__":
-    uvicorn.run(app, host="0.0.0.0", port=7860) 

app_fastapi.py → fastapi_app.py

@@ -1,8 +1,7 @@
-from fastapi import FastAPI, Request, Response, HTTPException
-from fastapi.responses import JSONResponse, FileResponse
+from fastapi import FastAPI, Request, HTTPException, Response, Body
+from fastapi.responses import JSONResponse, HTMLResponse, FileResponse
 from fastapi.staticfiles import StaticFiles
 from fastapi.templating import Jinja2Templates
-from pydantic import BaseModel
 import os
 import base64
 import numpy as np
@@ -12,49 +11,35 @@ from transformers import pipeline
 import threading
 import json
 import logging
-from topic_segmenter import TopicSegmenter
-import uvicorn
+from pydantic import BaseModel
 from typing import Optional, Dict, Any, List
-from fastapi.middleware.cors import CORSMiddleware
+from topic_segmenter import TopicSegmenter
 
-app = FastAPI()
+app = FastAPI(title="Flowify", description="Audio transcription and topic segmentation API")
 logging.basicConfig(level=logging.INFO)
 
-# Add CORS middleware
-app.add_middleware(
-    CORSMiddleware,
-    allow_origins=["*"],
-    allow_credentials=True,
-    allow_methods=["*"],
-    allow_headers=["*"],
-)
-
-# Templates for HTML rendering
+# Configure templates and static files
 templates = Jinja2Templates(directory="templates")
-
-# Serve static files - mount this after creating the app but before routes
 app.mount("/static", StaticFiles(directory="static"), name="static")
 
-# Models cache
+# Models and locks
 models = {}
 model_lock = threading.Lock()
 
-# Route to serve the main page
-@app.get("/")
-async def index(request: Request):
-    return templates.TemplateResponse("index.html", {"request": request})
-
-# Defining Pydantic models for request/response data
-class AudioRequest(BaseModel):
+class AudioData(BaseModel):
     audio: str
     model: Optional[str] = "openai/whisper-base"
 
-class TranscriptRequest(BaseModel):
+class TranscriptData(BaseModel):
     transcript: str
 
-class ModelCheckRequest(BaseModel):
+class ModelCheck(BaseModel):
     model: str
 
+@app.get("/", response_class=HTMLResponse)
+async def index(request: Request):
+    return templates.TemplateResponse("index.html", {"request": request})
+
 def get_model(model_name):
     """Load and cache the model"""
     with model_lock:
@@ -123,16 +108,16 @@ def process_audio(audio_data, sample_rate=16000, model_name="openai/whisper-base
         raise
 
 @app.post("/transcribe")
-async def transcribe(request: AudioRequest):
+async def transcribe(data: AudioData):
     try:
-        if not request.audio:
-            raise HTTPException(status_code=400, detail="No audio data provided")
-            
-        audio_bytes = base64.b64decode(request.audio)
+        audio_base64 = data.audio
+        audio_bytes = base64.b64decode(audio_base64)
         audio_np = np.frombuffer(audio_bytes, dtype=np.float32)
         
+        model_name = data.model
+        
         start_time = time.time()
-        transcript = process_audio(audio_np, model_name=request.model)
+        transcript = process_audio(audio_np, model_name=model_name)
         elapsed_time = time.time() - start_time
         
         logging.info(f"Transcription completed in {elapsed_time:.2f} seconds")
@@ -143,12 +128,9 @@ async def transcribe(request: AudioRequest):
         raise HTTPException(status_code=500, detail=str(e))
 
 @app.post("/analyze")
-async def analyze_topics(request: TranscriptRequest):
+async def analyze_topics(data: TranscriptData):
     try:
-        if not request.transcript:
-            raise HTTPException(status_code=400, detail="No transcript provided")
-            
-        transcript = request.transcript
+        transcript = data.transcript
         
         segmenter = TopicSegmenter(
             window_size=2,  
@@ -213,12 +195,9 @@ async def analyze_topics(request: TranscriptRequest):
         raise HTTPException(status_code=500, detail=str(e))
 
 @app.post("/check_model")
-async def check_model(request: ModelCheckRequest):
+async def check_model(data: ModelCheck):
     try:
-        if not request.model:
-            raise HTTPException(status_code=400, detail="No model specified")
-            
-        model_name = request.model
+        model_name = data.model
         logging.info(f"Checking model availability: {model_name}")
         
         if model_name in models:
@@ -239,5 +218,11 @@ async def check_model(request: ModelCheckRequest):
         logging.error(f"Model check error: {str(e)}")
         raise HTTPException(status_code=500, detail=str(e))
 
-if __name__ == '__main__':
-    uvicorn.run("app_fastapi:app", host="0.0.0.0", port=5000, reload=True) 
+# Special route for serving the index.html file
+@app.get("/favicon.ico")
+async def favicon():
+    return FileResponse("static/favicon.ico", media_type="image/x-icon")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run("fastapi_app:app", host="0.0.0.0", port=7860, reload=True) 

requirements.txt

@@ -1,5 +1,8 @@
-fastapi>=0.68.0
-uvicorn>=0.15.0
+flask>=2.0.0
+gunicorn>=20.0.0
+fastapi>=0.95.0
+uvicorn>=0.21.0
+python-multipart>=0.0.6
 numpy>=1.19.0
 scikit-learn>=1.0.0
 nltk>=3.6.0
@@ -10,6 +13,3 @@ spacy>=3.0.0
 librosa>=0.8.0
 soundfile>=0.10.0
 thinc>=8.0.0
-jinja2>=3.0.0
-python-multipart>=0.0.5
-pydantic>=1.8.2

space.yaml

@@ -0,0 +1,8 @@
+title: Flowify - Audio Transcription & Topic Analysis
+emoji: 🔄
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 7860
+pinned: false
+license: mit 

static/script.js

@@ -1,19 +1,51 @@
 import { pipeline, env } from 'https://unpkg.com/@xenova/transformers@2.16.0/dist/transformers.min.js';
 
-
 env.allowLocalModels = false;
 env.useBrowserCache = true;
 
+// Utility function to check if elements exist and log errors if they don't
+function getElements(selectors) {
+    const elements = {};
+    let allFound = true;
+    
+    for (const [key, selector] of Object.entries(selectors)) {
+        const element = selector.startsWith('.') ? 
+            document.querySelector(selector) : 
+            document.getElementById(selector);
+            
+        if (!element) {
+            console.warn(`Element not found: ${selector}`);
+            allFound = false;
+        }
+        
+        elements[key] = element;
+    }
+    
+    return { elements, allFound };
+}
+
+// Global variables
+const { elements } = getElements({
+    videoPlayer: 'videoPlayer',
+    fileInput: 'fileInput',
+    transcribeButton: 'transcribeButton',
+    analyzeButton: 'analyzeButton',
+    transcriptionDiv: 'transcription',
+    topicResultsDiv: 'topicResults',
+    statusDiv: 'status',
+    modelSelector: 'modelSelector',
+    modelStatus: 'modelStatus'
+});
 
-const videoPlayer = document.getElementById('videoPlayer');
-const fileInput = document.getElementById('fileInput');
-const transcribeButton = document.getElementById('transcribeButton');
-const analyzeButton = document.getElementById('analyzeButton');
-const transcriptionDiv = document.getElementById('transcription');
-const topicResultsDiv = document.getElementById('topicResults');
-const statusDiv = document.getElementById('status');
-const modelSelector = document.getElementById('modelSelector');
-const modelStatus = document.getElementById('modelStatus');
+const videoPlayer = elements.videoPlayer;
+const fileInput = elements.fileInput;
+const transcribeButton = elements.transcribeButton;
+const analyzeButton = elements.analyzeButton;
+const transcriptionDiv = elements.transcriptionDiv;
+const topicResultsDiv = elements.topicResultsDiv;
+const statusDiv = elements.statusDiv;
+const modelSelector = elements.modelSelector;
+const modelStatus = elements.modelStatus;
 
 let whisperPipeline = null;
 let transcriptText = '';
@@ -253,21 +285,53 @@ analyzeTopics = async function() {
     }
 };
 
+// Fixed file input change handler - properly handle video file selection
 fileInput.addEventListener('change', (e) => {
+    console.log("File input change event fired", e.target.files);
     const file = e.target.files[0];
     if (file) {
-        const videoURL = URL.createObjectURL(file);
-        videoPlayer.src = videoURL;
-        transcribeButton.disabled = false;
-        analyzeButton.disabled = true;
-        transcriptionDiv.textContent = '';
-        topicResultsDiv.textContent = '';
-        transcriptText = '';
-        statusDiv.textContent = 'Video loaded. Ready to transcribe.';
+        console.log("Processing selected file:", file.name, file.type);
         
-        const progressBarFill = document.querySelector('.progress-bar-fill');
-        if (progressBarFill) {
-            progressBarFill.style.width = '0%';
+        // Only process video files
+        if (!file.type.startsWith('video/')) {
+            alert('Please select a video file');
+            return;
+        }
+        
+        try {
+            const videoURL = URL.createObjectURL(file);
+            console.log("Created video URL:", videoURL);
+            
+            videoPlayer.src = videoURL;
+            videoPlayer.load(); // Force reload
+            
+            // Update UI
+            transcribeButton.disabled = false;
+            analyzeButton.disabled = true;
+            transcriptionDiv.innerHTML = '';
+            topicResultsDiv.innerHTML = '';
+            transcriptText = '';
+            statusDiv.textContent = 'Video loaded. Ready to transcribe.';
+            
+            // Reset progress
+            const progressBarFill = document.querySelector('.progress-bar-fill');
+            if (progressBarFill) {
+                progressBarFill.style.width = '0%';
+            }
+            
+            // Set active step
+            if (typeof window.setActiveStep === 'function') {
+                window.setActiveStep('upload');
+            }
+            
+            // Show the video element
+            videoPlayer.style.display = 'block';
+            
+            // Add a success message
+            console.log("Video file successfully loaded");
+        } catch (error) {
+            console.error("Error processing video file:", error);
+            alert('Error loading video: ' + error.message);
         }
     }
 });
@@ -473,20 +537,61 @@ modelSelector.addEventListener('change', async (e) => {
 
 // Initialize with the selected model when the page loads
 window.addEventListener('DOMContentLoaded', () => {
-    // Initialize all UI components
-    initThemeToggle();
-    initFAB();
-    initGallery();
-    initCustomVideoPlayer();
-    initUploadParticles();
-    initProgressSteps();
-    
-    // Original initialization
-    mindmap = new TopicMindmap();
-    initWhisper(modelSelector.value).catch(error => {
-        console.error('Failed to initialize Whisper:', error);
-        statusDiv.textContent = 'Failed to initialize the transcription model';
-    });
+    // Initialize all UI components with error handling for each
+    try {
+        initThemeToggle();
+    } catch (error) {
+        console.error('Failed to initialize theme toggle:', error);
+    }
+    
+    try {
+        initFAB();
+    } catch (error) {
+        console.error('Failed to initialize FAB:', error);
+    }
+    
+    try {
+        initGallery();
+    } catch (error) {
+        console.error('Failed to initialize gallery:', error);
+    }
+    
+    try {
+        initCustomVideoPlayer();
+    } catch (error) {
+        console.error('Failed to initialize custom video player:', error);
+    }
+    
+    try {
+        initUploadParticles();
+    } catch (error) {
+        console.error('Failed to initialize upload particles:', error);
+    }
+    
+    try {
+        initProgressSteps();
+    } catch (error) {
+        console.error('Failed to initialize progress steps:', error);
+    }
+    
+    // Initialize mindmap system
+    try {
+        mindmap = new TopicMindmap();
+    } catch (error) {
+        console.error('Failed to initialize mindmap:', error);
+    }
+    
+    // Check for model selector and initialize whisper if available
+    const modelSelector = document.getElementById('modelSelector');
+    if (modelSelector) {
+        initWhisper(modelSelector.value).catch(error => {
+            console.error('Failed to initialize Whisper:', error);
+            const statusDiv = document.getElementById('status');
+            if (statusDiv) {
+                statusDiv.textContent = 'Failed to initialize the transcription model';
+            }
+        });
+    }
 });
 
 // Theme toggle functionality
@@ -557,13 +662,30 @@ function initGallery() {
     const galleryClose = document.getElementById('galleryClose');
     const galleryContent = document.getElementById('galleryContent');
     
+    // Exit early if required elements don't exist
+    if (!galleryContainer || !galleryClose || !galleryContent) {
+        console.warn('Gallery elements not found, skipping gallery initialization');
+        return;
+    }
+    
     // Add "Recent Mindmaps" option to FAB
     const fabContainer = document.getElementById('fabContainer');
+    if (!fabContainer) {
+        console.warn('FAB container not found, skipping recent mindmaps button');
+        return;
+    }
+    
+    const fabOptions = fabContainer.querySelector('.fab-options');
+    if (!fabOptions) {
+        console.warn('FAB options not found, skipping recent mindmaps button');
+        return;
+    }
+    
     const recentMindmapsBtn = document.createElement('button');
     recentMindmapsBtn.className = 'fab-option';
     recentMindmapsBtn.setAttribute('title', 'Recent Mindmaps');
     recentMindmapsBtn.innerHTML = '<i class="fas fa-history"></i>';
-    fabContainer.querySelector('.fab-options').appendChild(recentMindmapsBtn);
+    fabOptions.appendChild(recentMindmapsBtn);
     
     // Show gallery
     recentMindmapsBtn.addEventListener('click', () => {
@@ -2047,8 +2169,12 @@ function initCustomVideoPlayer() {
 function initUploadParticles() {
     const uploadContainer = document.querySelector('.upload-container');
     const particles = document.querySelector('.particles');
+    const fileInput = document.getElementById('fileInput');
     
-    if (!uploadContainer || !particles) return;
+    if (!uploadContainer || !particles || !fileInput) {
+        console.warn('Upload elements not found, skipping upload particles initialization');
+        return;
+    }
     
     // Create particles
     for (let i = 0; i < 15; i++) {
@@ -2074,32 +2200,48 @@ function initUploadParticles() {
         particles.appendChild(particle);
     }
     
-    // Show upload progress when uploading
-    const fileInput = document.getElementById('fileInput');
-    
-    uploadContainer.addEventListener('click', () => {
+    // Add click event to trigger file input - FIXED VERSION
+    uploadContainer.addEventListener('click', (e) => {
+        e.preventDefault(); // Prevent default browser behavior
+        e.stopPropagation(); // Stop event from bubbling up
+        console.log("Upload container clicked");
         fileInput.click();
     });
     
-    // Drag and drop functionality with improved feedback
+    // Drag and drop functionality with improved feedback - FIXED VERSION
     uploadContainer.addEventListener('dragover', (e) => {
         e.preventDefault();
+        e.stopPropagation();
         uploadContainer.classList.add('active');
     });
     
-    uploadContainer.addEventListener('dragleave', () => {
+    uploadContainer.addEventListener('dragleave', (e) => {
+        e.preventDefault();
+        e.stopPropagation();
         uploadContainer.classList.remove('active');
     });
     
     uploadContainer.addEventListener('drop', (e) => {
+        console.log("File dropped");
         e.preventDefault();
+        e.stopPropagation();
         uploadContainer.classList.remove('active');
         
         if (e.dataTransfer.files.length) {
+            console.log("Processing dropped file");
             fileInput.files = e.dataTransfer.files;
-            fileInput.dispatchEvent(new Event('change'));
+            
+            // Create and dispatch a proper change event
+            const event = new Event('change', { bubbles: true });
+            fileInput.dispatchEvent(event);
         }
     });
+    
+    // Add logging to the file input change event for debugging
+    fileInput.addEventListener('change', (e) => {
+        console.log("File input change event fired", e.target.files);
+        // The rest of the handler continues below...
+    });
 }
 
 // Progress Steps Visualization

static/styles.css

@@ -1886,4 +1886,34 @@ jmnode.node-teal:hover, jmnode.node-gray:hover {
 
 .transcription-content p:hover {
     background-color: rgba(52, 152, 219, 0.1);
+}
+
+/* Hugging Face Badge Styles */
+.huggingface-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    margin-left: auto;
+    padding: 0.5rem;
+    border-radius: var(--radius-md);
+    background-color: var(--background-color);
+    transition: all 0.3s ease;
+}
+
+.huggingface-badge span {
+    font-size: 0.85rem;
+    color: var(--text-secondary);
+}
+
+.huggingface-badge img {
+    height: 24px;
+}
+
+.huggingface-badge:hover {
+    transform: translateY(-2px);
+    box-shadow: var(--shadow-sm);
+}
+
+[data-theme="dark"] .huggingface-badge {
+    background-color: var(--surface-color);
 }

templates/index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Flowify</title>
     
-    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
+    <link rel="stylesheet" href="{{ url_for('static', path='styles.css') }}">
     <link type="text/css" rel="stylesheet" href="https://unpkg.com/jsmind@0.8.6/style/jsmind.css" />
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
 </head>
@@ -16,6 +16,12 @@
                 <i class="fas fa-project-diagram logo-icon"></i>
                 <h1>Flowify</h1>
             </div>
+            <div class="huggingface-badge">
+                <span>Powered by</span>
+                <a href="https://huggingface.co/spaces" target="_blank">
+                    <img src="https://huggingface.co/datasets/huggingface/badges/raw/main/powered-by-huggingface-light.svg" alt="Powered by Hugging Face" />
+                </a>
+            </div>
         </header>
 
         <!-- Theme Toggle Button -->
@@ -32,7 +38,7 @@
             <div class="upload-panel card">
                 <div class="card-body">
                     <div class="upload-section">
-                        <div class="upload-container" id="dropZone">
+                        <div class="upload-container" id="dropZone" onclick="event.preventDefault();">
                             <div class="particles">
                                 <!-- Particles will be added dynamically via JS -->
                             </div>
@@ -310,6 +316,6 @@
     <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.16.0"></script>
     <script type="text/javascript" src="https://unpkg.com/jsmind@0.8.6/es6/jsmind.js"></script>
     <script>window.jsMind = jsMind;</script>
-    <script type="module" src="{{ url_for('static', filename='script.js') }}"></script>
+    <script type="module" src="{{ url_for('static', path='script.js') }}"></script>
 </body>
 </html>