fasthtml homepage added

.gitignore

@@ -270,3 +270,4 @@ cython_debug/
 *.sqlite
 deployment
 .files
+.sesskey

Makefile

@@ -203,5 +203,10 @@ run-audio-graph:
 run-chat-graph:
 	uv run chainlit run src/podflix/gui/base_chat.py --host 0.0.0.0 --port 5000 --headless
 
-run-copilot:
-	uv run uvicorn podflix.gui.copilot.app:app --host 0.0.0.0 --port 5002
+run-fasthtml:
+	uv run uvicorn podflix.gui.fasthtml_ui.home:app --host 0.0.0.0 --port 5002
+	# uv run uvicorn podflix.gui.fasthtml_ui.copilot:app --host 0.0.0.0 --port 5002
+
+run-backend:
+	 uv run uvicorn podflix.gui.backend:app --host 0.0.0.0 --port 5000
+	# uv run uvicorn podflix.gui.backend:app --host 0.0.0.0 --port 5000 --root-path=/chat

src/podflix/gui/backend.py

@@ -0,0 +1,56 @@
+from pathlib import Path
+
+import chainlit as cl
+from chainlit.auth import get_current_user
+from chainlit.context import init_http_context
+from chainlit.utils import mount_chainlit
+from fastapi import Depends, FastAPI, Request
+from fastapi.responses import HTMLResponse, RedirectResponse
+from loguru import logger
+from starlette.middleware.cors import CORSMiddleware
+from typing_extensions import Annotated
+
+from podflix.gui.fasthtml_ui.home import app as fasthtml_app
+
+app = FastAPI()
+
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins="*",
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+
+@app.get("/")
+def home():
+    return RedirectResponse(url="/home")
+
+
+@app.get("/chainlit-message-test")
+async def chainlit_message_send(
+    request: Request,
+    current_user: Annotated[cl.User, Depends(get_current_user)],
+):
+    init_http_context(user=current_user)
+
+    logger.debug(f"Current User: {current_user}")
+
+    logger.debug(f"Request: {request}")
+
+    await cl.Message(content="Hello World").send()
+
+    return HTMLResponse("Hello World")
+
+
+# Mount fasthtml app
+app.mount(app=fasthtml_app, path="/home")
+
+
+# Mount chainlit app
+mount_chainlit(
+    app=app,
+    path="/chat",
+    target=Path(__file__).parent.joinpath("base_chat.py").absolute().as_posix(),
+)

src/podflix/gui/copilot/app.py → src/podflix/gui/fasthtml_ui/copilot.py

@@ -7,11 +7,10 @@
 def get():
     return Titled(
         "Chainlit Copilot Demo",
-        # Add the Chainlit widget scripts
-        Script(src="http://localhost:5000/copilot/index.js"),
+        Script(src="http://localhost:5000/chat/copilot/index.js"),
         Script("""
             window.mountChainlitWidget({
-                chainlitServer: "http://localhost:5000",
+                chainlitServer: "http://localhost:5000/chat",
             });
         """),
     )

src/podflix/gui/fasthtml_ui/home.py

@@ -0,0 +1,147 @@
+from fasthtml.common import (
+    H1,
+    H2,
+    H3,
+    A,
+    Card,
+    Container,
+    Div,
+    Grid,
+    P,
+    Style,
+    Title,
+    fast_app,
+)
+
+app, rt = fast_app()
+
+
+@rt("/")
+def get():
+    hero_section = Div(
+        H1("PodFlix", cls="hero-title"),
+        P("Chat with your favorite podcasts using AI", cls="hero-subtitle"),
+        A("Try it now!", href="/chat", cls="button-primary"),
+        cls="hero-section",
+    )
+
+    features = Grid(
+        Card(
+            H3("Upload"),
+            P("Simply upload your podcast or audio file"),
+            cls="feature-card",
+        ),
+        Card(
+            H3("Transcribe"),
+            P("Advanced AI converts speech to text with high accuracy"),
+            cls="feature-card",
+        ),
+        Card(
+            H3("Chat"),
+            P("Have interactive conversations about the content"),
+            cls="feature-card",
+        ),
+        cls="features-grid",
+    )
+
+    content = Container(
+        # Div(A("Go to Chat", href="/chat", cls="chat-button"), cls="nav-bar"),
+        hero_section,
+        Div(H2("How it works", cls="section-title"), features, cls="features-section"),
+    )
+
+    styles = Style("""
+        .nav-bar {
+            display: flex;
+            justify-content: flex-end;
+            padding: 1rem;
+            position: fixed;
+            top: 0;
+            right: 0;
+            width: 100%;
+            z-index: 100;
+        }
+
+        .chat-button {
+            background: var(--primary);
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            text-decoration: none;
+            transition: transform 0.2s;
+        }
+
+        .chat-button:hover {
+            transform: translateY(-2px);
+        }
+
+        .hero-section {
+            text-align: center;
+            padding: 6rem 2rem 4rem 2rem;
+            background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
+            color: white;
+            margin-bottom: 2rem;
+        }
+
+        .hero-title {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+        }
+
+        .hero-subtitle {
+            font-size: 1.5rem;
+            margin-bottom: 2rem;
+            opacity: 0.9;
+        }
+
+        .button-primary {
+            display: inline-block;
+            padding: 1rem 2rem;
+            font-size: 1.2rem;
+            background: black;
+            border-radius: 2rem;
+            text-decoration: none;
+            transition: transform 0.2s;
+        }
+
+        .button-primary:hover {
+            transform: translateY(-2px);
+        }
+
+        .section-title {
+            text-align: center;
+            margin-bottom: 3rem;
+        }
+
+        .features-section {
+            padding: 4rem 2rem;
+        }
+
+        .features-grid {
+            gap: 2rem;
+        }
+
+        .feature-card {
+            text-align: center;
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+            transition: transform 0.2s;
+        }
+
+        .feature-card:hover {
+            transform: translateY(-5px);
+        }
+
+        @media (max-width: 768px) {
+            .hero-title {
+                font-size: 2.5rem;
+            }
+
+            .hero-subtitle {
+                font-size: 1.2rem;
+            }
+        }
+    """)
+
+    return Title("PodFlix - Chat with your Podcasts"), styles, content