deploy at 2024-09-16 03:04:07.561156

.gitattributes

@@ -1,35 +1,2 @@
-*.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
+# Auto detect text files and perform LF normalization
+* text=auto

.gitignore

@@ -0,0 +1,3 @@
+.sesskey
+__pycache__/
+venv/

Dockerfile

@@ -0,0 +1,24 @@
+# Use Python 3.10 as the base image
+FROM python:3.10
+
+# Set the working directory in the container
+WORKDIR /code
+
+# Copy the current directory contents into the container with correct ownership
+COPY --link --chown=1000 . .
+
+# Create a cache directory for Hugging Face Hub and set permissions
+RUN mkdir -p /tmp/cache/
+RUN chmod a+rwx -R /tmp/cache/
+
+# Set Hugging Face Hub cache directory environment variable
+ENV HF_HUB_CACHE=HF_HOME
+
+# Install any needed packages specified in requirements.txt
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Set environment variables
+ENV PYTHONUNBUFFERED=1 PORT=7860
+
+# Run the FastAPI app using Uvicorn
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,73 @@
----
-title: Fastgpt Test
-emoji: 🚀
-colorFrom: purple
-colorTo: pink
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: FastGPT
+emoji: 🤖
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_file: main.py
+pinned: false
+---
+
+# FastGPT: A Lightweight ChatGPT Implementation Using FastHTML
+
+**FastGPT** is a minimalistic ChatGPT implementation built using FastHTML, designed to be fast and lightweight, while providing a seamless experience for users. It connects to the GPT-4o model and supports session-based memory to allow for back-and-forth interactions.
+
+We aim to progressively and iteratively add features to better align with the current state of ChatGPT. This project is open-source, so feel free to contribute by submitting a pull request or forking the repo and building upon it yourself!
+
+**Created by Jack Tol**  
+[https://jacktol.net](https://jacktol.net)  
+[https://conversationai.io](https://conversationai.io)
+
+## Video Demo
+
+Watch the demo of FastGPT on YouTube:
+
+[![FastGPT Demo](https://img.youtube.com/vi/24aGmm_0mTw/0.jpg)](https://www.youtube.com/watch?v=24aGmm_0mTw)
+
+## Features
+
+- **GPT-4o Model Integration**: Connects to the latest version of OpenAI's GPT-4o model for advanced text-based interactions.
+- **Session-Based Memory**: Keeps track of the current conversation, allowing for coherent back-and-forth dialogue.
+- **Session Management**: Refreshing the page or pressing the "New Chat" button will terminate the current session and initiate a fresh one.
+- **Automatic Markdown Parsing**: Both the home page and model responses support Markdown, allowing for easy formatting and enhanced readability.
+- **Dynamic Input Box**: The chat input dynamically grows for better visibility when entering long messages.
+- **Lightweight Design**: Built without front-end frameworks, leveraging vanilla CSS for a lightweight, fast user experience.
+- **Token-by-Token Streaming**: Responses from the model stream onto the screen in real-time, providing instant feedback.
+- **Interaction Management**: Users cannot send a message while the model is still generating a response, ensuring a smooth interaction.
+- **"New Chat" Button**: Easily initiate a new session with a simple button click.
+
+## Usage Instructions
+
+1. **Clone the Repo**
+
+   ```
+   git clone https://github.com/jack-tol/fastgpt.git
+   ```
+
+2. **Set your OpenAI API Key**  
+   Ensure your `OPENAI_API_KEY` environment variable is set to your OpenAI API Key.
+
+   ```
+   export OPENAI_API_KEY=your-openai-api-key-here
+   ```
+
+3. **Install Dependencies**  
+   Navigate into the cloned directory and install the required dependencies.
+
+   ```
+   pip install -r requirements.txt
+   ```
+
+4. **Run the Application**  
+   Open up your terminal, `cd` into the directory where the `main.py` file is located, and run the following command:
+
+   ```
+   uvicorn main:app --port 8080 --reload
+   ```
+
+5. **Start Chatting**  
+   Open your browser and navigate to `http://localhost:8080` to start your local ChatGPT experience!
+
+## Contributing
+
+Feel free to contribute to FastGPT by submitting a pull request or creating a fork of the repository. As the project evolves, more features will be added to better align with the capabilities of the ChatGPT platform. Help us make FastGPT even better!

main.py

@@ -0,0 +1,179 @@
+from fasthtml_hf import setup_hf_backup
+import os
+from fastapi import FastAPI, HTTPException, Request
+from sse_starlette.sse import EventSourceResponse
+from fastapi.staticfiles import StaticFiles
+from openai import AsyncOpenAI
+from fasthtml.common import FastHTML, Html, Head, Title, Body, Div, Button, Textarea, Script, Style, P, Favicon
+from fasthtml.common import ft_hx
+import bleach
+
+from styles import styles
+from script import script
+
+# Set the secret key directly from environment variable or default
+secret_key = os.getenv('SECRET_KEY')
+
+# Initialize FastHTML with the provided secret key
+app = FastHTML(secret_key=secret_key)
+
+
+# Mount static files
+app.mount("/static", StaticFiles(directory="static"), name="static")
+
+# Setup Hugging Face backup, explicitly setting a writable directory
+setup_hf_backup(app)
+
+client = AsyncOpenAI()
+
+# Dictionary to store user conversations by session ID
+conversations = {}
+
+# Allow additional HTML tags and attributes for sanitization
+ALLOWED_TAGS = list(bleach.sanitizer.ALLOWED_TAGS) + [
+    "h1", "h2", "h3", "p", "strong", "em", "ul", "ol", "li", "code", "pre", "blockquote"
+]
+ALLOWED_ATTRIBUTES = bleach.sanitizer.ALLOWED_ATTRIBUTES
+
+# Resolve paths to favicon images
+static_dir = os.path.join(os.path.dirname(__file__), "static")
+light_icon = os.path.join(static_dir, "favicon-light.ico")
+dark_icon = os.path.join(static_dir, "favicon-dark.ico")
+
+# Custom SVG component
+def Svg(*c, viewBox=None, **kwargs):
+    return ft_hx('svg', *c, viewBox=viewBox, **kwargs)
+
+# Custom Path component for SVG with color
+def Path(*c, d=None, fill=None, **kwargs):
+    return ft_hx('path', *c, d=d, fill=fill, **kwargs)
+
+# Homepage route
+@app.get("/")
+def home():
+    """Render homepage with FastGPT UI."""
+    home_text = """
+## FastGPT - A ChatGPT Implementation Using FastHTML
+    """
+    
+    page = Html(
+        Head(
+            Title('FastGPT'),
+            Favicon(light_icon="/static/favicon-light.ico", dark_icon="/static/favicon-dark.ico"),  # Serve static favicon files
+            Style(styles),
+            Script(src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"),
+            Script(src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/2.2.9/purify.min.js")
+        ),
+        Body(
+            Div(
+                Div("FastGPT", _class="logo-text"),
+                Div(
+                    Button(
+                        Svg(
+                            Path(
+                                d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152L0 424c0 48.6 39.4 88 88 88l272 0c48.6 0 88-39.4 88-88l0-112c0-13.3-10.7-24-24-24s-24 10.7-24 24l0 112c0 22.1-17.9 40-40 40L88 464c-22.1 0-40-17.9-40-40l0-272c0-22.1 17.9-40 40-40l112 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L88 64z",
+                                fill="#b4b4b4"
+                            ),
+                            viewBox="0 0 512 512",
+                            _class="refresh-icon"
+                        ),
+                        onclick="location.reload()",
+                        _class="refresh-button"
+                    ),
+                    _class='refresh-container'
+                ),
+                _class="header"
+            ),
+            Div(
+                Div(
+                    Div(id="home-text-container", _class="markdown-container", **{"data-home-text": home_text}),
+                    _class='title-wrapper'
+                ),
+                P(id='output'),
+                Div(
+                    Textarea(
+                        id='message',
+                        rows=1,
+                        cols=50,
+                        placeholder="Message FastGPT",
+                        oninput="autoResizeTextarea()",
+                        onkeypress="checkEnter(event)"
+                    ),
+                    Button(
+                        Svg(
+                            Path(
+                                d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2 160 448c0 17.7 14.3 32 32 32s32-14.3 32-32l0-306.7L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z"
+                            ),
+                            viewBox="0 0 384 512",
+                            _class="send-icon"
+                        ),
+                        onclick="sendMessage()",
+                        _class="send-button"
+                    ),
+                    _class="container"
+                ),
+                _class="wrapper"
+            ),
+            Script(script)
+        )
+    )
+    return page
+
+# Route to stream responses based on user input
+@app.get("/stream")
+async def stream_response(request: Request, message: str, session_id: str = None):
+    """Stream responses for the given user input."""
+    if not message:
+        raise HTTPException(status_code=400, detail="Message parameter is required")
+    if not session_id:
+        raise HTTPException(status_code=400, detail="Session ID is required")
+
+    # Initialize conversation if the session ID is new
+    if session_id not in conversations:
+        conversations[session_id] = [
+            {"role": "system", "content": "You are a helpful assistant. Use Markdown for formatting."}
+        ]
+
+    # Add user's message to the conversation
+    conversations[session_id].append({"role": "user", "content": message})
+
+    async def event_generator():
+        try:
+            # Call OpenAI API to stream response
+            response = await client.chat.completions.create(
+                model="gpt-4o-mini",
+                messages=conversations[session_id],
+                stream=True
+            )
+
+            assistant_response = ""
+
+            # Stream response chunks to the client
+            async for chunk in response:
+                if await request.is_disconnected():
+                    print(f"Client for session {session_id} disconnected")
+                    break
+
+                content = chunk.choices[0].delta.content
+                if content:
+                    assistant_response += content
+                    yield {"data": content}
+
+            # Save assistant's response to the conversation
+            conversations[session_id].append({"role": "assistant", "content": assistant_response})
+
+        except Exception as e:
+            yield {"data": f"Error: {str(e)}"}
+
+        finally:
+            print(f"Streaming finished for session {session_id}")
+
+    return EventSourceResponse(event_generator())
+
+# Route to reset conversation for a given session ID
+@app.get("/reset")
+def reset_conversation(session_id: str):
+    """Reset the conversation for the specified session ID."""
+    if session_id in conversations:
+        del conversations[session_id]
+    return {"message": "Conversation reset."}

requirements.txt

@@ -0,0 +1,6 @@
+bleach
+fastapi
+openai
+python-fasthtml
+sse-starlette
+fasthtml-hf

script.py

@@ -0,0 +1,123 @@
+script = """
+// Generate a new session ID on every page load
+let sessionId = Math.random().toString(36).substring(2);
+
+// Handle page load
+window.onload = function() {
+    autoResizeTextarea();  // Handle the initial state of the textarea
+    renderHomeText();      // Render the home text (markdown content)
+};
+
+// Function to handle sending a message
+async function sendMessage() {
+    const messageElem = document.getElementById('message');
+    const sendButton = document.querySelector('.send-button');
+    const message = messageElem.value.trim();
+
+    // Return early if the message is empty
+    if (!message) return;
+
+    const output = document.getElementById('output');
+
+    // Disable textarea and button while processing
+    messageElem.disabled = true;
+    sendButton.disabled = true;
+    sendButton.classList.add('disabled'); // Visual indication
+
+    // Display user's message in the chat
+    const userMessage = document.createElement('p');
+    userMessage.classList.add('message', 'user');
+    userMessage.innerHTML = message.replace(/\\n/g, '<br>'); // Preserve line breaks
+    output.appendChild(userMessage);
+
+    // Clear the textarea and reset its height
+    messageElem.value = '';
+    autoResizeTextarea();
+
+    // Scroll to the bottom of the output
+    output.scrollTop = output.scrollHeight;
+
+    // Create a new div for the AI's response
+    let aiMessage = document.createElement('p');
+    aiMessage.classList.add('message', 'ai');
+    output.appendChild(aiMessage);
+
+    // Open a connection to stream the AI's response
+    const eventSource = new EventSource(`/stream?message=${encodeURIComponent(message)}&session_id=${encodeURIComponent(sessionId)}`);
+    let partialResponse = ''; // Accumulate streaming response
+
+    eventSource.onmessage = function(event) {
+        partialResponse += event.data;
+
+        // Convert markdown to HTML and sanitize it
+        const sanitizedHtml = DOMPurify.sanitize(marked.parse(partialResponse));
+        aiMessage.innerHTML = sanitizedHtml;
+        output.scrollTop = output.scrollHeight; // Scroll to the bottom
+    };
+
+    // Handle errors during the SSE connection
+    eventSource.onerror = function() {
+        console.error("Error occurred with SSE");
+        resetInputState(messageElem, sendButton); // Re-enable input on error
+        eventSource.close(); // Close the connection
+    };
+
+    eventSource.onopen = function() {
+        console.log("Connection to server opened.");
+    };
+
+    // Re-enable textarea and button after the AI finishes responding
+    eventSource.onclose = function() {
+        console.log("Connection to server closed.");
+        resetInputState(messageElem, sendButton); // Re-enable input after response
+    };
+}
+
+// Function to reset the input state (re-enable textarea and send button)
+function resetInputState(messageElem, sendButton) {
+    messageElem.disabled = false;
+    sendButton.disabled = false;
+    sendButton.classList.remove('disabled');
+    messageElem.focus();
+}
+
+// Auto-resize the textarea as the user types and manage send button state
+function autoResizeTextarea() {
+    const textarea = document.getElementById('message');
+    const sendButton = document.querySelector('.send-button');
+    
+    textarea.style.height = 'auto'; // Reset height to auto
+    const maxHeight = 220;
+    let newHeight = textarea.scrollHeight;
+
+    if (newHeight > maxHeight) {
+        textarea.style.height = maxHeight + 'px';
+        textarea.style.overflowY = 'auto';
+    } else {
+        textarea.style.height = newHeight + 'px';
+        textarea.style.overflowY = 'hidden';
+    }
+
+    // Enable/disable the send button based on textarea content
+    sendButton.disabled = textarea.value.trim() === '';
+    sendButton.classList.toggle('disabled', !textarea.value.trim());
+}
+
+// Enable sending message on Enter key press (without shift)
+function checkEnter(e) {
+    if (e.key === 'Enter' && !e.shiftKey) {
+        e.preventDefault();
+        sendMessage();
+    }
+}
+
+// Function to render home page text from Markdown (on page load)
+function renderHomeText() {
+    const homeTextContainer = document.getElementById('home-text-container');
+    const markdownContent = homeTextContainer.getAttribute('data-home-text');
+
+    // Parse markdown and sanitize HTML
+    const sanitizedHtml = DOMPurify.sanitize(marked.parse(markdownContent));
+    homeTextContainer.innerHTML = sanitizedHtml;
+}
+"""

styles.py

@@ -0,0 +1,254 @@
+styles = """
+/* General Styling */
+html, body {
+    margin: 0;
+    padding: 0;
+    height: 100%;
+    background-color: #212121;
+    font-family: 'Inter', sans-serif;
+    color: white;
+    display: block;
+    overflow: auto;
+}
+
+p {
+    line-height: 1.75;
+}
+
+/* Header */
+.header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 20px;
+    z-index: 10;
+    height: 60px;
+}
+
+.logo-text {
+    font-size: 40px;
+    font-weight: 600;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-top: 20px;
+}
+
+/* Wrapper */
+.wrapper {
+    margin-top: 60px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: center;
+    height: calc(100vh - 60px);
+    width: 100%;
+    padding: 20px 0;
+    box-sizing: border-box;
+    position: relative;
+}
+
+/* Title Section */
+.title-wrapper {
+    width: 90%;
+    max-width: 740px;
+    margin-bottom: 10px;
+    display: flex;
+    justify-content: center;
+}
+
+.title {
+    color: #b4b4b4;
+    margin: 0;
+    padding-top: 50px;
+    text-align: left;
+}
+
+/* Output Section */
+#output {
+    width: 90%;
+    max-width: 740px;
+    flex-grow: 1;
+    padding: 10px;
+    background-color: #212121;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    border-radius: 20px;
+    margin: 10px auto;
+    box-sizing: border-box;
+    max-height: calc(100vh - 180px);
+}
+
+/* Container */
+.container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    background-color: #2f2f2f;
+    padding: 10px;
+    border-radius: 30px;
+    width: 90%;
+    max-width: 740px;
+    min-height: 38px;
+    margin: 0 auto;
+    box-sizing: border-box;
+    position: relative;
+    flex-shrink: 0;
+}
+
+/* Textarea */
+textarea {
+    flex: 1;
+    background-color: transparent;
+    color: #ececec;
+    border: none;
+    padding: 4px 20px 2px 20px;
+    font-family: 'Inter', sans-serif;
+    font-size: 18px;
+    line-height: 1.5;
+    resize: none;
+    outline: none;
+    overflow-y: hidden;
+    min-height: 30px;
+    max-height: 220px;
+    margin: 0;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    flex-shrink: 0;
+}
+
+textarea:disabled {
+    background-color: #2f2f2f;
+    opacity: 0.5;
+    cursor: default;
+}
+
+textarea::placeholder {
+    color: #b4b4b4;
+    font-size: 18px;
+}
+
+/* Buttons */
+.refresh-button, .send-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease;
+}
+
+/* Refresh Button */
+.refresh-button {
+    width: 40px;
+    height: 40px;
+    background-color: transparent;
+    border-radius: 50%;
+    padding: 0;
+}
+
+.refresh-button:hover {
+    background-color: #333;
+}
+
+.refresh-icon {
+    width: 24px;
+    height: 24px;
+    fill: #b4b4b4;
+    transition: fill 0.3s ease;
+}
+
+.refresh-button:hover .refresh-icon {
+    fill: #fff;
+}
+
+/* Send Button */
+.send-button {
+    background-color: #ffffff;
+    color: #212121;
+    border-radius: 50%;
+    width: 35px;
+    height: 35px;
+    margin-left: 10px;
+    box-sizing: border-box;
+    padding: 5px;
+    transition: background-color 0.3s ease, fill 0.3s ease;
+}
+
+.send-button svg {
+    width: 18px;
+    height: 18px;
+    fill: #000000;
+    transition: fill 0.3s ease;
+}
+
+.send-button:hover {
+    background-color: #ccc;
+}
+
+/* Disabled Send Button */
+.send-button.disabled {
+    background-color: #676767;
+    cursor: default;
+}
+
+.send-button.disabled svg {
+    fill: #2f2f2f;
+}
+
+/* Message Styles */
+.message.user {
+    background-color: #2f2f2f;
+    color: white;
+    display: inline-block;
+    padding: 10px 20px;
+    border-radius: 20px;
+    max-width: 500px;
+    margin: 10px 0;
+    align-self: flex-end;
+    word-wrap: break-word;
+    word-break: break-word;
+}
+
+
+.message.ai {
+    background-color: transparent;
+    color: #f5f5f5;
+    display: inline-block;
+    padding: 10px 0;
+    margin: 10px 0;
+    max-width: 100%;
+    align-self: flex-start;
+    word-wrap: break-word;
+}
+
+/* Scrollbars */
+#output::-webkit-scrollbar, textarea::-webkit-scrollbar {
+    width: 10px;
+    background-color: #424242;
+}
+
+#output::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
+    background-color: #686868;
+    border-radius: 5px;
+}
+
+#output::-webkit-scrollbar-thumb:hover, textarea::-webkit-scrollbar-thumb:hover {
+    background-color: #555;
+}
+
+/* Media Queries */
+@media (max-width: 768px) {
+    #output, .container, .title-wrapper {
+        width: 95%;
+    }
+}
+"""