How to run 🐳 DeepSite locally

#74
by enzostvs - opened

Hi everyone 👋

Some of you have asked me how to use DeepSite locally. It's actually super easy!
Thanks to Inference Providers, you'll be able to switch between different providers just like in the online application. The cost should also be very low (a few cents at most).

Run DeepSite locally

  1. Clone the repo using git
git clone https://huggingface.co/spaces/enzostvs/deepsite
  1. Install the dependencies (make sure node is installed on your machine)
npm install
  1. Create your .env file and add the HF_TOKEN variable
    Make sure to create a token with inference permissions and optionally write permissions (if you want to deploy your results in Spaces)

  2. Build the project

npm run build
  1. Start it and enjoy with a coffee ☕
npm run start

To make sure everything is correctly setup, you should see this banner on the top-right corner.
Screenshot 2025-04-16 at 11.40.21 AM.png

Feel free to ask or report issue related to the local usage below 👇
Thank you all!

enzostvs pinned discussion
victor changed discussion title from 🐳 How to use it locally to How to run 🐳 DeepSite locally

It would be cool to provide instructions for running this in docker. I tried it yesterday and got it running although it gave an error when trying to use it. I did not look into what was causing it yet though.

this works great thank you!

im getting Invalid credentials in Authorization header

not really that familiar with running stuff locally

getting error as "Invalid credentials in Authorization header"

getting error as "Invalid credentials in Authorization header"

Are you sure you did those steps correctly?

  1. Create a token with inference permissions: https://huggingface.co/settings/tokens/new?ownUserPermissions=repo.content.read&ownUserPermissions=repo.write&ownUserPermissions=inference.serverless.write&tokenType=fineGrained then copy it to your clipboard
  2. Create a new file named .env in the Deepsite folder you cloned and paste your token in it so it should look like this:
HF_TOKEN=THE_TOKEN_YOU_JUST_CREATED
  1. Launch the app again

is it free if i run it locally? cause it's asking me for some pro subscription

How do we use the local ollama api or models for this project?

Hi there! 👋
I’ve made some changes and need to test them, but I’ve run into an issue — my free inference quota has been exhausted.
I'm currently exploring options to continue testing,
If anyone knows a quick workaround or a way to test without upgrading right away, I’d really appreciate your input!
image.png

image.png

what exactly are you testing?
send me the code, I'll try to run it on my paid version, I also made my custom development and connected an openrouter, everything works fine, but there is a problem that cannot be solved, this is the output of 1200-1700 lines of code, through any model, I tried many models, Claude 3.7 OpenAI 4.1 and many others, there is also a problem with the limitation in the number of tokens for 1 request (= 16 000), if you need to write large amounts of code and do many iterations.
Enzostvs is a very smart guy and he did a great job, there are clearly not enough video tutorials that will help with custom modifications of DeepSite

what exactly are you testing?
send me the code, I'll try to run it on my paid version, I also made my custom development and connected an openrouter, everything works fine, but there is a problem that cannot be solved, this is the output of 1200-1700 lines of code, through any model, I tried many models, Claude 3.7 OpenAI 4.1 and many others, there is also a problem with the limitation in the number of tokens for 1 request (= 16 000), if you need to write large amounts of code and do many iterations.
Enzostvs is a very smart guy and he did a great job, there are clearly not enough video tutorials that will help with custom modifications of DeepSite

I was testing some custom changes I made to DeepSite’s interface — mainly added features like file upload support, conversation history tracking, and a microphone input option. Everything works smoothly on the frontend, but now I need to validate backend inference after these changes.

I’ve hit a limit on my free inference quota, so I can't test full cycles right now. Since you're running a paid setup and even connected OpenRouter, that's awesome! If you're open to testing, I’d be happy to share the code (just let me know how you'd prefer I send it).

Also agree — not enough clear tutorials out there for custom DeepSite setups. Maybe we could even collaborate on a guide

what exactly are you testing?
send me the code, I'll try to run it on my paid version, I also made my custom development and connected an openrouter, everything works fine, but there is a problem that cannot be solved, this is the output of 1200-1700 lines of code, through any model, I tried many models, Claude 3.7 OpenAI 4.1 and many others, there is also a problem with the limitation in the number of tokens for 1 request (= 16 000), if you need to write large amounts of code and do many iterations.
Enzostvs is a very smart guy and he did a great job, there are clearly not enough video tutorials that will help with custom modifications of DeepSite

I was testing some custom changes I made to DeepSite’s interface — mainly added features like file upload support, conversation history tracking, and a microphone input option. Everything works smoothly on the frontend, but now I need to validate backend inference after these changes.

I’ve hit a limit on my free inference quota, so I can't test full cycles right now. Since you're running a paid setup and even connected OpenRouter, that's awesome! If you're open to testing, I’d be happy to share the code (just let me know how you'd prefer I send it).

Also agree — not enough clear tutorials out there for custom DeepSite setups. Maybe we could even collaborate on a guide

@sayasurya05
Can you explain why your code that you sent me in telegram asks for account data, login and password when trying to send the code to https://huggingface.co/
maybe it's worth making the code public, as it does for example https://github.com/MartinsMessias/deepsite-locally ???

FEATURES.md

Enhanced Features for DeepSite

This document outlines the enhancements made to the DeepSite application, focusing on the chat interface, search bar, and file upload functionality.

Chat Interface Enhancements

The chat interface has been completely redesigned to provide a better user experience:

  • Chat History: Added a collapsible chat history panel that shows all previous interactions between the user and AI
  • Message Timestamps: Each message now displays the time it was sent
  • Message Status: Messages show their current status (sending, sent, error)
  • Visual Distinction: Clear visual separation between user messages and AI responses
  • Scrollable History: Chat history is scrollable for easy navigation through past conversations
  • Clear History: Option to clear chat history when needed

Search Bar Improvements

The search bar has been enhanced to support longer text inputs and provide a better user experience:

  • Auto-resizing Textarea: The input field now automatically resizes based on content
  • Scrollbar Support: When text exceeds the maximum height, a scrollbar appears
  • Clear Button: Added a button to quickly clear the input field
  • Keyboard Shortcuts: Press Enter to send, Shift+Enter for new line
  • Improved Placeholder: Dynamic placeholder text based on conversation state
  • Visual Feedback: Better visual feedback during input and when AI is processing

File Upload Feature

A new file upload feature has been added to allow users to share files with the AI:

  • Multiple File Support: Upload multiple files at once
  • File Type Filtering: Support for HTML, CSS, JavaScript, and image files
  • File Preview: Visual preview of uploaded files with appropriate icons
  • File Management: Options to remove individual files or clear all files
  • Size Limitations: 5MB maximum file size with appropriate error messages
  • Integration with AI: Uploaded files are sent to the AI for processing
  • Visual Indicators: Badge showing the number of uploaded files

Server-Side Enhancements

The server has been updated to support these new features:

  • File Processing: Server now processes uploaded files and includes them in AI prompts
  • Content Extraction: Extracts and formats file content for the AI
  • Image Handling: Special handling for image files
  • Code File Support: Special formatting for HTML, CSS, and JavaScript files

How to Use

Chat History

  1. Click the "Show Chat" button at the top of the chat interface to view chat history
  2. Scroll through past messages
  3. Click "Clear Chat History" to remove all messages

Enhanced Search Bar

  1. Type your message in the input field
  2. The field will automatically expand as you type
  3. Press Enter to send or Shift+Enter for a new line
  4. Click the clear button (X) to quickly clear the input

File Upload

  1. Click the attachment button (paperclip icon)
  2. Select files from your device (HTML, CSS, JS, or images)
  3. View uploaded files in the file panel
  4. Remove individual files or clear all files as needed
  5. Send your message with the attached files

Technical Implementation

The enhancements were implemented using:

  • React state management for chat history and file uploads
  • LocalStorage for persistent chat history
  • React-textarea-autosize for the expanding input field
  • WebSocket integration for real-time updates
  • Server-side file processing with Base64 encoding/decoding
  • Tailwind CSS for responsive design
This comment has been hidden (marked as Off-Topic)

Sign up or log in to comment