asd1asd1 commited on
Commit
303d1cf
Β·
verified Β·
1 Parent(s): 140b816

creame un sitio web de chat que funcione correctamente con este repositorio

Browse files

"Skip to content
Navigation Menu
langchain-ai
local-deep-researcher

Type / to search
Code
Issues
36
Pull requests
2
Actions
Projects
Security
Insights
Owner avatar
local-deep-researcher
Public
langchain-ai/local-deep-researcher
Go to file
t
Name

.github/workflows


src/ollama_deep_researcher


.env.example


Dockerfile


LICENSE


README.md


langgraph.json


pyproject.toml


uv.lock


Repository files navigation
README
MIT license
Local Deep Researcher
Local Deep Researcher is a fully local web research assistant that uses any LLM hosted by Ollama or LMStudio. Give it a topic and it will generate a web search query, gather web search results, summarize the results of web search, reflect on the summary to examine knowledge gaps, generate a new search query to address the gaps, and repeat for a user-defined number of cycles. It will provide the user a final markdown summary with all sources used to generate the summary.

ollama-deep-research

Short summary video:

Ollama.Deep.Researcher.Overview-enhanced-v2-90p.mp4
πŸ”₯ Updates
8/6/25: Added support for tool calling and gpt-oss.
⚠️ WARNING (8/6/25): The gpt-oss models do not support JSON mode in Ollama. Select use_tool_calling in the configuration to use tool calling instead of JSON mode.

πŸ“Ί Video Tutorials
See it in action or build it yourself? Check out these helpful video tutorials:

Overview of Local Deep Researcher with R1 - Load and test DeepSeek R1 distilled models.
Building Local Deep Researcher from Scratch - Overview of how this is built.
πŸš€ Quickstart
Clone the repository:

git clone https://github.com/langchain-ai/local-deep-researcher.git
cd local-deep-researcher
Then edit the .env file to customize the environment variables according to your needs. These environment variables control the model selection, search tools, and other configuration settings. When you run the application, these values will be automatically loaded via python-dotenv (because langgraph.json point to the "env" file).

cp .env.example .env
Selecting local model with Ollama
Download the Ollama app for Mac here.

Pull a local LLM from Ollama. As an example:

ollama pull deepseek-r1:8b
Optionally, update the .env file with the following Ollama configuration settings.
If set, these values will take precedence over the defaults set in the Configuration class in configuration.py.
LLM_PROVIDER=ollama
OLLAMA_BASE_URL="http://localhost:11434" # Ollama service endpoint, defaults to `http://localhost:11434`
LOCAL_LLM=model # the model to use, defaults to `llama3.2` if not set
Selecting local model with LMStudio
Download and install LMStudio from here.

In LMStudio:

Download and load your preferred model (e.g., qwen_qwq-32b)
Go to the "Local Server" tab
Start the server with the OpenAI-compatible API
Note the server URL (default: http://localhost:1234/v1)
Optionally, update the .env file with the following LMStudio configuration settings.

If set, these values will take precedence over the defaults set in the Configuration class in configuration.py.
LLM_PROVIDER=lmstudio
LOCAL_LLM=qwen_qwq-32b # Use the exact model name as shown in LMStudio
LMSTUDIO_BASE_URL=http://localhost:1234/v1
Selecting search tool
By default, it will use DuckDuckGo for web search, which does not require an API key. But you can also use SearXNG, Tavily or Perplexity by adding their API keys to the environment file. Optionally, update the .env file with the following search tool configuration and API keys. If set, these values will take precedence over the defaults set in the Configuration class in configuration.py.

SEARCH_API=xxx # the search API to use, such as `duckduckgo` (default)
TAVILY_API_KEY=xxx # the tavily API key to use
PERPLEXITY_API_KEY=xxx # the perplexity API key to use
MAX_WEB_RESEARCH_LOOPS=xxx # the maximum number of research loop steps, defaults to `3`
FETCH_FULL_PAGE=xxx # fetch the full page content (with `duckduckgo`), defaults to `false`
Running with LangGraph Studio
Mac
(Recommended) Create a virtual environment:
python -m venv .venv
source .venv/bin/activate
Launch LangGraph server:
# Install uv package manager
curl -LsSf https://astral.sh/uv/install.sh | sh
uvx --refresh --from "langgraph-cli[inmem]" --with-editable . --python 3.11 langgraph dev
Windows
(Recommended) Create a virtual environment:
Install Python 3.11 (and add to PATH during installation).
Restart your terminal to ensure Python is available, then create and activate a virtual environment:
python -m venv .venv
.venv\Scripts\Activate.ps1
Launch LangGraph server:
# Install dependencies
pip install -e .
pip install -U "langgraph-cli[inmem]"

# Start the LangGraph server
langgraph dev
Using the LangGraph Studio UI
When you launch LangGraph server, you should see the following output and Studio will open in your browser:

Ready!

API: http://127.0.0.1:2024

Docs: http://127.0.0.1:2024/docs

LangGraph Studio Web UI: https://smith.langchain.com/studio/?baseUrl=http://127.0.0.1:2024

Open LangGraph Studio Web UI via the URL above. In the configuration tab, you can directly set various assistant configurations. Keep in mind that the priority order for configuration values is:

1. Environment variables (highest priority)
2. LangGraph UI configuration
3. Default values in the Configuration class (lowest priority)
Screenshot 2025-01-24 at 10 08 31 PM
Give the assistant a topic for research, and you can visualize its process!

Screenshot 2025-01-24 at 10 08 22 PM
Model Compatibility Note
When selecting a local LLM, set steps use structured JSON output. Some models may have difficulty with this requirement, and the assistant has fallback mechanisms to handle this. As an example, the DeepSeek R1 (7B) and DeepSeek R1 (1.5B) models have difficulty producing required JSON output, and the assistant will use a fallback mechanism to handle this.

Browser Compatibility Note
When accessing the LangGraph Studio UI:

Firefox is recommended for the best experience
Safari users may encounter security warnings due to mixed content (HTTPS/HTTP)
If you encounter issues, try:
Using Firefox or another browser
Disabling ad-blocking extensions
Checking browser console for specific error messages
How it works
Local Deep Researcher is inspired by IterDRAG. This approach will decompose a query into sub-queries, retrieve documents for each one, answer the sub-query, and then build on the answer by retrieving docs for the second sub-query. Here, we do similar:

Given a user-provided topic, use a local LLM (via Ollama or LMStudio) to generate a web search query
Uses a search engine / tool to find relevant sources
Uses LLM to summarize the findings from web search related to the user-provided research topic
Then, it uses the LLM to reflect on the summary, identifying knowledge gaps
It generates a new search query to address the knowledge gaps
The process repeats, with the summary being iteratively updated with new information from web search
Runs for a configurable number of iterations (see configuration tab)
Outputs
The output of the graph is a markdown file containing the research summary, with citations to the sources used. All sources gathered during research are saved to the graph state. You can visualize them in the graph state, which is visible in LangGraph Studio:

Screenshot 2024-12-05 at 4 08 59 PM

The final summary is saved to the graph state as well:

Screenshot 2024-12-05 at 4 10 11 PM

Deployment Options
There are various ways to deploy this graph. See Module 6 of LangChain Academy for a detailed walkthrough of deployment options with LangGraph.

TypeScript Implementation
A TypeScript port of this project (without Perplexity search) is available at: https://github.com/PacoVK/ollama-deep-researcher-ts

Running as a Docker container
The included Dockerfile only runs LangChain Studio with local-deep-researcher as a service, but does not include Ollama as a dependant service. You must run Ollama separately and configure the OLLAMA_BASE_URL environment variable. Optionally you can also specify the Ollama model to use by providing the LOCAL_LLM environment variable.

Clone the repo and build an image:

$ docker build -t local-deep-researcher .
Run the container:

$ docker run --rm -it -p 2024:2024 \
-e SEARCH_API="tavily" \
-e TAVILY_API_KEY="tvly-***YOUR_KEY_HERE***" \
-e LLM_PROVIDER=ollama \
-e OLLAMA_BASE_URL="http://host.docker.internal:11434/" \
-e LOCAL_LLM="llama3.2" \
local-deep-researcher
NOTE: You will see log message:

2025-02-10T13:45:04.784915Z [info ] 🎨 Opening Studio in your browser... [browser_opener] api_variant=local_dev message=🎨 Opening Studio in your browser...
URL: https://smith.langchain.com/studio/?baseUrl=http://0.0.0.0:2024
...but the browser will not launch from the container.

Instead, visit this link with the correct baseUrl IP address: https://smith.langchain.com/studio/thread?baseUrl=http://127.0.0.1:2024

About
Fully local web research and report writing assistant

Resources
Readme
License
MIT license
Activity
Custom properties
Stars
8.2k stars
Watchers
67 watching
Forks
852 forks
Report repository
Releases
No releases published
Packages
No packages published
Contributors
10
@rlancemartin
@gschmutz
@cgmartin
@lthomas122
@mycommonreader
@Ramachetan
@Prakul95
@sei-eschwartz
@mdrxy
@Ownistic
Languages
Python
97.4%

Dockerfile
2.6%
Footer
Β© 2025 GitHub, Inc.
Footer navigation
Terms
Privacy
Security
Status
Community
Docs
Contact
Manage cookies
Do not share my personal information
"

Files changed (7) hide show
  1. README.md +8 -5
  2. components/footer.js +60 -0
  3. components/navbar.js +69 -0
  4. index.html +96 -19
  5. research.html +86 -0
  6. script.js +10 -0
  7. style.css +26 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Deepchat Explorer
3
- emoji: 🐨
4
- colorFrom: blue
5
- colorTo: indigo
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: DeepChat Explorer πŸš€
3
+ colorFrom: purple
4
+ colorTo: gray
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite-v3
10
  ---
11
 
12
+ # Welcome to your new DeepSite project!
13
+ This project was created with [DeepSite](https://huggingface.co/deepsite).
components/footer.js ADDED
@@ -0,0 +1,60 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomFooter extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ footer {
7
+ background: #1e1b4b;
8
+ color: white;
9
+ padding: 2rem;
10
+ text-align: center;
11
+ margin-top: auto;
12
+ }
13
+ .footer-content {
14
+ max-width: 1200px;
15
+ margin: 0 auto;
16
+ display: flex;
17
+ flex-direction: column;
18
+ gap: 1rem;
19
+ }
20
+ .footer-links {
21
+ display: flex;
22
+ justify-content: center;
23
+ gap: 1.5rem;
24
+ margin-bottom: 1rem;
25
+ }
26
+ .footer-links a {
27
+ color: #c7d2fe;
28
+ text-decoration: none;
29
+ transition: color 0.2s;
30
+ }
31
+ .footer-links a:hover {
32
+ color: white;
33
+ }
34
+ .copyright {
35
+ font-size: 0.875rem;
36
+ color: #a5b4fc;
37
+ }
38
+ @media (max-width: 640px) {
39
+ .footer-links {
40
+ flex-direction: column;
41
+ gap: 0.5rem;
42
+ align-items: center;
43
+ }
44
+ }
45
+ </style>
46
+ <footer>
47
+ <div class="footer-content">
48
+ <div class="footer-links">
49
+ <a href="/privacy.html">Privacy Policy</a>
50
+ <a href="/terms.html">Terms of Service</a>
51
+ <a href="https://github.com/langchain-ai/local-deep-researcher">GitHub</a>
52
+ <a href="/contact.html">Contact</a>
53
+ </div>
54
+ <p class="copyright">&copy; ${new Date().getFullYear()} DeepChat Explorer. All rights reserved.</p>
55
+ </div>
56
+ </footer>
57
+ `;
58
+ }
59
+ }
60
+ customElements.define('custom-footer', CustomFooter);
components/navbar.js ADDED
@@ -0,0 +1,69 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ class CustomNavbar extends HTMLElement {
2
+ connectedCallback() {
3
+ this.attachShadow({ mode: 'open' });
4
+ this.shadowRoot.innerHTML = `
5
+ <style>
6
+ nav {
7
+ background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
8
+ padding: 1rem 2rem;
9
+ display: flex;
10
+ justify-content: space-between;
11
+ align-items: center;
12
+ box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
13
+ }
14
+ .logo {
15
+ color: white;
16
+ font-weight: bold;
17
+ font-size: 1.25rem;
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 0.5rem;
21
+ }
22
+ ul {
23
+ display: flex;
24
+ gap: 1.5rem;
25
+ list-style: none;
26
+ margin: 0;
27
+ padding: 0;
28
+ }
29
+ a {
30
+ color: white;
31
+ text-decoration: none;
32
+ transition: all 0.2s;
33
+ font-weight: 500;
34
+ padding: 0.5rem 1rem;
35
+ border-radius: 0.375rem;
36
+ }
37
+ a:hover {
38
+ background: rgba(255, 255, 255, 0.1);
39
+ }
40
+ @media (max-width: 640px) {
41
+ nav {
42
+ flex-direction: column;
43
+ gap: 1rem;
44
+ padding: 1rem;
45
+ }
46
+ ul {
47
+ width: 100%;
48
+ justify-content: space-around;
49
+ }
50
+ a {
51
+ padding: 0.5rem;
52
+ }
53
+ }
54
+ </style>
55
+ <nav>
56
+ <div class="logo">
57
+ <i data-feather="compass"></i>
58
+ <span>DeepChat Explorer</span>
59
+ </div>
60
+ <ul>
61
+ <li><a href="/">Home</a></li>
62
+ <li><a href="/research.html">Research</a></li>
63
+ <li><a href="/settings.html">Settings</a></li>
64
+ </ul>
65
+ </nav>
66
+ `;
67
+ }
68
+ }
69
+ customElements.define('custom-navbar', CustomNavbar);
index.html CHANGED
@@ -1,19 +1,96 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>DeepChat Explorer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-100">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <div class="container mx-auto px-4 py-8">
16
+ <div class="max-w-4xl mx-auto bg-white rounded-xl shadow-md overflow-hidden">
17
+ <!-- Chat header -->
18
+ <div class="bg-indigo-600 px-6 py-4 flex items-center">
19
+ <i data-feather="message-square" class="text-white mr-2"></i>
20
+ <h1 class="text-xl font-bold text-white">DeepChat Explorer</h1>
21
+ </div>
22
+
23
+ <!-- Chat container -->
24
+ <div class="h-96 overflow-y-auto p-4" id="chat-container">
25
+ <!-- Messages will appear here -->
26
+ <div class="text-center text-gray-500 py-10">
27
+ <i data-feather="send" class="w-12 h-12 mx-auto mb-4"></i>
28
+ <p>Start chatting with your local AI researcher</p>
29
+ </div>
30
+ </div>
31
+
32
+ <!-- Input area -->
33
+ <div class="border-t border-gray-200 p-4 bg-gray-50">
34
+ <form id="chat-form" class="flex gap-2">
35
+ <input
36
+ type="text"
37
+ id="message-input"
38
+ placeholder="Ask something to research..."
39
+ class="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500"
40
+ autocomplete="off"
41
+ >
42
+ <button
43
+ type="submit"
44
+ class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
45
+ >
46
+ <i data-feather="send" class="inline"></i>
47
+ </button>
48
+ </form>
49
+ </div>
50
+ </div>
51
+ </div>
52
+
53
+ <custom-footer></custom-footer>
54
+
55
+ <script src="components/navbar.js"></script>
56
+ <script src="components/footer.js"></script>
57
+ <script src="script.js"></script>
58
+ <script>
59
+ feather.replace();
60
+
61
+ // Chat functionality
62
+ document.getElementById('chat-form').addEventListener('submit', function(e) {
63
+ e.preventDefault();
64
+ const input = document.getElementById('message-input');
65
+ const message = input.value.trim();
66
+
67
+ if (message) {
68
+ addMessage(message, 'user');
69
+ input.value = '';
70
+
71
+ // Simulate AI response (in a real app, this would call your backend)
72
+ setTimeout(() => {
73
+ addMessage("I'm researching: " + message, 'ai');
74
+ addMessage("Found 3 relevant sources about this topic. Would you like me to summarize them?", 'ai');
75
+ }, 1000);
76
+ }
77
+ });
78
+
79
+ function addMessage(text, sender) {
80
+ const container = document.getElementById('chat-container');
81
+ const messageDiv = document.createElement('div');
82
+ messageDiv.className = `mb-4 flex ${sender === 'user' ? 'justify-end' : 'justify-start'}`;
83
+
84
+ messageDiv.innerHTML = `
85
+ <div class="${sender === 'user' ? 'bg-indigo-100' : 'bg-gray-200'} rounded-lg py-2 px-4 max-w-xs md:max-w-md">
86
+ <p>${text}</p>
87
+ </div>
88
+ `;
89
+
90
+ container.appendChild(messageDiv);
91
+ container.scrollTop = container.scrollHeight;
92
+ }
93
+ </script>
94
+ <script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
95
+ </body>
96
+ </html>
research.html ADDED
@@ -0,0 +1,86 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Research History | DeepChat Explorer</title>
7
+ <link rel="stylesheet" href="style.css">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ </head>
12
+ <body class="bg-gray-100">
13
+ <custom-navbar></custom-navbar>
14
+
15
+ <div class="container mx-auto px-4 py-8">
16
+ <div class="max-w-6xl mx-auto">
17
+ <div class="flex items-center mb-6">
18
+ <i data-feather="book" class="text-indigo-600 mr-2"></i>
19
+ <h1 class="text-2xl font-bold text-gray-800">Research History</h1>
20
+ </div>
21
+
22
+ <div class="bg-white rounded-xl shadow-md overflow-hidden">
23
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-0">
24
+ <!-- Sidebar -->
25
+ <div class="bg-indigo-50 p-4 border-r border-indigo-100">
26
+ <div class="flex items-center mb-4">
27
+ <i data-feather="search" class="text-indigo-600 mr-2"></i>
28
+ <h2 class="font-semibold text-gray-800">Saved Queries</h2>
29
+ </div>
30
+ <div class="space-y-2">
31
+ <div class="p-2 rounded-lg bg-white shadow-sm cursor-pointer hover:bg-indigo-100">
32
+ <p class="font-medium">AI in healthcare</p>
33
+ <p class="text-xs text-gray-500">2 days ago</p>
34
+ </div>
35
+ <div class="p-2 rounded-lg cursor-pointer hover:bg-indigo-100">
36
+ <p class="font-medium">Blockchain security</p>
37
+ <p class="text-xs text-gray-500">1 week ago</p>
38
+ </div>
39
+ <div class="p-2 rounded-lg cursor-pointer hover:bg-indigo-100">
40
+ <p class="font-medium">Quantum computing</p>
41
+ <p class="text-xs text-gray-500">2 weeks ago</p>
42
+ </div>
43
+ </div>
44
+ </div>
45
+
46
+ <!-- Main content -->
47
+ <div class="md:col-span-2 p-6">
48
+ <div class="flex justify-between items-center mb-6">
49
+ <h3 class="text-lg font-semibold">Research Results: "AI in healthcare"</h3>
50
+ <button class="text-indigo-600 hover:text-indigo-800">
51
+ <i data-feather="download"></i>
52
+ </button>
53
+ </div>
54
+
55
+ <div class="prose max-w-none">
56
+ <h4>Summary</h4>
57
+ <p>Artificial Intelligence is transforming healthcare through improved diagnostics, personalized treatment plans, and operational efficiencies...</p>
58
+
59
+ <h4 class="mt-4">Sources</h4>
60
+ <ul>
61
+ <li><a href="#" class="text-indigo-600 hover:underline">WHO Report on AI in Global Health</a></li>
62
+ <li><a href="#" class="text-indigo-600 hover:underline">Nature Medicine: AI Diagnostics Study</a></li>
63
+ <li><a href="#" class="text-indigo-600 hover:underline">Healthcare IT News: Operational Applications</a></li>
64
+ </ul>
65
+
66
+ <h4 class="mt-4">Key Findings</h4>
67
+ <ul>
68
+ <li>AI can reduce diagnostic errors by up to 30%</li>
69
+ <li>Personalized treatment algorithms improve outcomes</li>
70
+ <li>Administrative automation saves billions annually</li>
71
+ </ul>
72
+ </div>
73
+ </div>
74
+ </div>
75
+ </div>
76
+ </div>
77
+ </div>
78
+
79
+ <custom-footer></custom-footer>
80
+
81
+ <script src="components/navbar.js"></script>
82
+ <script src="components/footer.js"></script>
83
+ <script src="script.js"></script>
84
+ <script>feather.replace();</script>
85
+ </body>
86
+ </html>
script.js ADDED
@@ -0,0 +1,10 @@
 
 
 
 
 
 
 
 
 
 
 
1
+ // Shared JavaScript across all pages
2
+ console.log('DeepChat Explorer loaded');
3
+
4
+ // Initialize tooltips for icons
5
+ document.addEventListener('DOMContentLoaded', function() {
6
+ const icons = document.querySelectorAll('[data-feather]');
7
+ icons.forEach(icon => {
8
+ icon.setAttribute('title', icon.getAttribute('data-feather'));
9
+ });
10
+ });
style.css CHANGED
@@ -1,28 +1,36 @@
 
1
  body {
2
- padding: 2rem;
3
- font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
 
 
4
  }
5
 
6
- h1 {
7
- font-size: 16px;
8
- margin-top: 0;
9
  }
10
 
11
- p {
12
- color: rgb(107, 114, 128);
13
- font-size: 15px;
14
- margin-bottom: 10px;
15
- margin-top: 5px;
16
  }
17
 
18
- .card {
19
- max-width: 620px;
20
- margin: 0 auto;
21
- padding: 16px;
22
- border: 1px solid lightgray;
23
- border-radius: 16px;
24
  }
25
 
26
- .card p:last-child {
27
- margin-bottom: 0;
28
  }
 
 
 
 
 
 
 
 
 
 
 
1
+ /* Shared styles across all pages */
2
  body {
3
+ font-family: 'Inter', sans-serif;
4
+ min-height: 100vh;
5
+ display: flex;
6
+ flex-direction: column;
7
  }
8
 
9
+ /* Chat container scrollbar */
10
+ #chat-container::-webkit-scrollbar {
11
+ width: 8px;
12
  }
13
 
14
+ #chat-container::-webkit-scrollbar-track {
15
+ background: #f1f1f1;
16
+ border-radius: 10px;
 
 
17
  }
18
 
19
+ #chat-container::-webkit-scrollbar-thumb {
20
+ background: #c7d2fe;
21
+ border-radius: 10px;
 
 
 
22
  }
23
 
24
+ #chat-container::-webkit-scrollbar-thumb:hover {
25
+ background: #a5b4fc;
26
  }
27
+
28
+ /* Animation for messages */
29
+ @keyframes fadeIn {
30
+ from { opacity: 0; transform: translateY(10px); }
31
+ to { opacity: 1; transform: translateY(0); }
32
+ }
33
+
34
+ #chat-container div {
35
+ animation: fadeIn 0.3s ease-out;
36
+ }