Deploy version 0.2.0

README.md

@@ -1,17 +1,8 @@
----
-title: DataGen
-emoji: 🧬
-colorFrom: indigo
-colorTo: pink
-sdk: docker
-short_description: AI-powered synthetic data generator
----
-
 # 🧬 DataGen: AI-Powered Synthetic Data Generator
 
 Generate realistic synthetic datasets by simply describing what you need.
 
-[🚀 **Try the Live Demo**](https://huggingface.co/spaces/lisekarimi/datagen) 
+[🚀 **Try the Live Demo**](https://datagen.lisekarimi.com)
 
 <img src="https://github.com/lisekarimi/datagen/blob/main/assets/screenshot.png?raw=true" alt="DataGen interface" width="450">
 
@@ -26,10 +17,14 @@ DataGen transforms simple descriptions into structured datasets using AI. Perfec
 - **AI-powered:** Uses GPT and Claude models
 - **Instant download** with clean, ready-to-use datasets
 
+To understand the full workflow from user input to file output, see the [architecture section](https://datagen.lisekarimi.com/docs/#/archi).
+
+
 ## 🚀 Quick Start
 
 ### Prerequisites
 - Python 3.11+
+- [Docker Desktop](https://www.docker.com/products/docker-desktop/)
 - [uv package manager](https://docs.astral.sh/uv/getting-started/installation/)
 
 ### Installation
@@ -54,21 +49,21 @@ make run
 make ui
 ```
 
-*For complete setup instructions, commands, and development guidelines, see [docs/dev.md](https://github.com/lisekarimi/datagen/blob/main/docs/dev.md)*
+*For complete setup instructions, commands, and development guidelines, see [the Docs Page](https://datagen.lisekarimi.com/docs).*
 
 ## 🧑‍💻 How to Use
 
 1. **Describe your data:** "Customer purchase history with demographics"
-2. **Choose format:** CSV, JSON, Parquet, or Markdown  
+2. **Choose format:** CSV, JSON, Parquet, or Markdown
 3. **Select AI model:** GPT or Claude
 4. **Set sample size:** Number of records to generate
-5. **Generate & download** your dataset 
+5. **Generate & download** your dataset
 
 ## 🛡️ Quality & Security
 
 DataGen maintains high standards with comprehensive test coverage, automated security scanning, and code quality enforcement.
 
-*For CI/CD setup and technical details, see [docs/cicd.md](https://github.com/lisekarimi/datagen/blob/main/docs/cicd.md)*
+*For CI/CD setup and technical details, see [the docs Page](https://datagen.lisekarimi.com/docs/#/cicd).*
 
 ## 📝 Notes
 - Generated files are automatically cleaned up after 5 minutes
@@ -76,7 +71,6 @@ DataGen maintains high standards with comprehensive test coverage, automated sec
 - JSON output includes proper indentation for readability
 - Cross-platform compatibility (Windows, macOS, Linux)
 
-
 ## 📄 License
 
-MIT
+MIT

assets/styles.css

@@ -11,7 +11,7 @@ html, body, #app, body > div, .gradio-container {
 }
 
 #app-container {
-    background-color: #1d3451 !important;  
+    background-color: #1d3451 !important;
     padding: 40px;
     border-radius: 12px;
     box-shadow: 0 4px 25px rgba(0, 0, 0, 0.4);
@@ -27,7 +27,7 @@ html, body, #app, body > div, .gradio-container {
 #app-container strong {
     font-size: 16px;
     line-height: 1.6;
-    color: white !important; 
+    color: white !important;
 }
 
 #app-title {
@@ -54,7 +54,7 @@ html, body, #app, body > div, .gradio-container {
 
 #intro-text {
     font-size: 16px;
-    color: white !important; 
+    color: white !important;
     margin-top: 20px;
     line-height: 1.6;
 }
@@ -67,7 +67,7 @@ html, body, #app, body > div, .gradio-container {
 
 .button-link {
     background: linear-gradient(to left, #ff416c, #ff4b2b);
-    color: white !important; 
+    color: white !important;
     padding: 10px 20px;
     text-decoration: none;
     font-weight: bold;
@@ -100,7 +100,7 @@ html, body, #app, body > div, .gradio-container {
 
 .label-box {
     background-color: #1f2937;
-    color: white; 
+    color: white;
     padding: 4px 10px;
     border-radius: 8px;
     display: inline-block;
@@ -115,11 +115,11 @@ html, body, #app, body > div, .gradio-container {
     margin: 0 !important;
 }
 .row-spacer {
-    margin-top: 24px !important; 
+    margin-top: 24px !important;
 }
 
 .column-gap {
-  gap: 16px; 
+  gap: 16px;
 }
 
 textarea, input[type="text"] {
@@ -163,7 +163,7 @@ ul[role="listbox"] li[aria-selected="true"] {
 
 input[type="number"] {
     background-color: #374151;
-    color: white !important; 
+    color: white !important;
 }
 
 #business-problem-box {
@@ -181,7 +181,7 @@ input[type="number"] {
 
 #run-btn {
     background: linear-gradient(to left, #ff416c, #ff4b2b);
-    color: white !important; 
+    color: white !important;
     font-weight: bold;
     border: none;
     padding: 10px 20px;
@@ -234,4 +234,56 @@ input[type="number"] {
 .version-banner {
     text-align: center;
     font-size: 0.9em;
-}
+}
+
+/* ==== Floating chat button for Gradio ==== */
+.floating-chat-btn {
+    position: fixed !important;
+    bottom: 30px !important;
+    right: 30px !important;
+    display: flex !important;
+    align-items: center !important;
+    gap: 0.5rem !important;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
+    color: white !important;
+    padding: 1rem 1.75rem !important;
+    border-radius: 50px !important;
+    text-decoration: none !important;
+    font-weight: 600 !important;
+    font-size: 1rem !important;
+    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.5) !important;
+    z-index: 9999 !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    white-space: nowrap !important;
+  }
+
+  .floating-chat-btn:hover {
+    transform: translateY(-3px) scale(1.02) !important;
+    box-shadow: 0 8px 24px rgba(255, 65, 108, 0.7) !important;
+    text-decoration: none !important;
+    color: white !important;
+  }
+
+  .floating-chat-btn:active {
+    transform: translateY(-1px) scale(0.98) !important;
+  }
+
+  /* Tablet and smaller desktop */
+  @media (max-width: 1024px) {
+    .floating-chat-btn {
+      bottom: 25px !important;
+      right: 25px !important;
+      font-size: 0.95rem !important;
+      padding: 0.875rem 1.5rem !important;
+    }
+  }
+
+  /* Mobile */
+  @media (max-width: 768px) {
+    .floating-chat-btn {
+      bottom: 20px !important;
+      right: 20px !important;
+      font-size: 0.9rem !important;
+      padding: 0.875rem 1.25rem !important;
+    }
+  }

main.py

@@ -1,14 +1,41 @@
 """Entry point for the application."""
 
 import os
+from pathlib import Path
+from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import RedirectResponse
+import gradio as gr
 from src.ui import build_ui
 
+# Create FastAPI app with custom docs URLs
+app = FastAPI(
+    docs_url="/api-docs", redoc_url="/api-redoc", openapi_url="/api-openapi.json"
+)
+
+# Get docs path
+docs_path = Path(__file__).parent / "docs"
+
+
+# Add redirect from /docs to /docs/ (must come BEFORE mounting)
+@app.get("/docs")
+async def redirect_to_docs():
+    """Redirect to the /docs/ homepage."""
+    return RedirectResponse(url="/docs/")
+
+
+# Mount your documentation
+if docs_path.exists():
+    app.mount("/docs", StaticFiles(directory=str(docs_path), html=True), name="docs")
+
+# Build Gradio UI
 demo = build_ui()
 
+# Mount Gradio to the root path (this should come LAST)
+app = gr.mount_gradio_app(app, demo, path="")
+
 # Main application entry point
 if __name__ == "__main__":
-    demo.launch(
-        allowed_paths=["output"],
-        server_name="0.0.0.0",
-        server_port=int(os.environ.get("PORT", 7860)),
-    )
+    import uvicorn
+
+    uvicorn.run(app, host="0.0.0.0", port=int(os.environ.get("PORT", 7860)))

pyproject.toml

@@ -1,6 +1,6 @@
 [project]
 name = "datagen"
-version = "0.1.0"
+version = "0.2.0"
 description = "AI-powered platform for generating synthetic datasets"
 readme = "README.md"
 requires-python = ">=3.11"
@@ -23,7 +23,7 @@ filterwarnings = [
 [tool.ruff.lint]
 select = [
     "E",   # pycodestyle errors
-    "W",   # pycodestyle warnings  
+    "W",   # pycodestyle warnings
     "F",   # Pyflakes
     "D",   # pydocstyle (docstrings)
     "UP",  # pyupgrade

src/ui.py

@@ -59,11 +59,10 @@ def build_ui(css_path="assets/styles.css"):
                 """
                 gr.HTML(intro_html)
 
-                # Fix the missing quote in REPO_URL
-                learn_more_html = f"""
+                learn_more_html = """
                     <div id="learn-more-button">
-                        <a href="{REPO_URL}/blob/main/README.md"
-                           class="button-link" target="_blank">Learn More</a>
+                        <a href="/docs/"
+                           class="button-link">Documentation</a>
                     </div>
                     """
                 gr.HTML(learn_more_html)
@@ -173,6 +172,15 @@ def build_ui(css_path="assets/styles.css"):
                 """
             )
 
+            # Floating chat button
+            gr.HTML(
+                """
+                <a href="/docs/" class="floating-chat-btn" target="_blank">
+                    💬 Chat with AI Assistant
+                </a>
+            """
+            )
+
         return ui
 
     except Exception as e:

uv.lock

@@ -1,5 +1,5 @@
 version = 1
-revision = 2
+revision = 3
 requires-python = ">=3.11"
 resolution-markers = [
     "python_full_version >= '3.13'",
@@ -177,7 +177,7 @@ wheels = [
 
 [[package]]
 name = "datagen"
-version = "0.1.0"
+version = "0.2.0"
 source = { virtual = "." }
 dependencies = [
     { name = "anthropic" },