Skip to content

Commit 3e2e1de

Browse files
dovvnloadingdovvnloading
authored
Update README.md
1 parent 7176ac6 commit 3e2e1de

File tree

1 file changed

+166
-1
lines changed

1 file changed

+166
-1
lines changed

‎README.md‎

Lines changed: 166 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,167 @@
11
# Os-WebDev
2-
placeholder
2+
3+
<div align="center">
4+
<img src="https://github.com/user-attachments/assets/a253ed59-79b2-4db7-81cc-cce4fc34e022" alt="Os-WebDev Interface Overview" width="100%" />
5+
</div>
6+
7+
<div align="center">
8+
9+
![License](https://img.shields.io/github/license/dovvnloading/Os-WebDev?style=for-the-badge)
10+
![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
11+
![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
12+
![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
13+
![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white)
14+
![Gemini](https://img.shields.io/badge/Google%20Gemini-8E75B2?style=for-the-badge&logo=google&logoColor=white)
15+
16+
</div>
17+
18+
## Overview
19+
20+
Os-WebDev is a futuristic, claymorphic integrated development environment (IDE) that runs entirely in the browser. It leverages Google's Gemini models to bridge the gap between natural language instruction and functional web code.
21+
22+
Designed as a prototype to democratize software development, this application allows users to generate, edit, and preview HTML, CSS, and JavaScript applications through a conversational interface. It features a sophisticated multi-agent system capable of architectural planning and code execution, wrapped in a unique user interface designed to feel tactile and organic.
23+
24+
## Mission Statement
25+
26+
This project acts as a functional prototype intended to break down the barriers of entry for web development and design. By integrating advanced artificial intelligence directly into the workspace, Os-WebDev aims to democratize creation, allowing individuals to build complex logic and interfaces regardless of their prior coding experience.
27+
28+
## Interface & Theming
29+
30+
The application supports seamless transitions between themes while maintaining its distinct "claymorphism" design language—combining inner shadows, outer drop shadows, and rounded corners to create a soft, 3D, tactile aesthetic.
31+
32+
<div align="center">
33+
<img src="https://github.com/user-attachments/assets/28f2c8af-fb2a-47fa-8a66-2e44a679c5a4" width="48%" alt="Light Mode Interface" />
34+
<img src="https://github.com/user-attachments/assets/a3c411a3-83f3-411d-8aca-719d27e0d18f" width="48%" alt="Dark Mode Interface" />
35+
</div>
36+
37+
## Key Features
38+
39+
### 1. Dual Operational Modes
40+
* **Simple Mode:** A streamlined "Chat-to-App" interface. Users describe their needs, and the system automatically writes files and updates the live preview. The code complexity is hidden to focus on visual output.
41+
* **Developer Mode:** A fully featured IDE experience. Users have full control over the virtual file system, can edit code manually, and review AI suggestions before applying them.
42+
43+
### 2. Agentic AI Workflow
44+
The application implements a multi-step agentic workflow using distinct Gemini models:
45+
* **Architect Agent (Gemini 2.5 Flash):** Analyzes the user request and current file state to generate a technical execution plan without writing code.
46+
* **Developer Agent (Gemini 3 Pro):** Receives the Architect's plan and executes it, utilizing a higher "thinking budget" to ensure logic consistency and syntax accuracy.
47+
48+
### 3. Virtual File System (VFS)
49+
A completely client-side file system that maintains state in memory. It supports:
50+
* Creation, deletion, and editing of HTML, CSS, and JS files.
51+
* Dynamic dependency injection (styles and scripts are injected into the preview iframe on the fly).
52+
53+
### 4. Smart Code Editor
54+
* **Syntax Highlighting:** Powered by PrismJS for accurate tokenization of supported languages.
55+
* **Context-Aware AI Tools:** Right-clicking code allows users to trigger specific AI actions: *Explain*, *Refactor*, *Find Bugs*, or *Add Comments*.
56+
* **Shadow Output Protocol:** The AI communicates code changes via a hidden XML protocol (`<file path="...">`), ensuring the chat interface remains conversational while the VFS updates programmatically.
57+
58+
## Technical Stack
59+
60+
### Core Framework
61+
* **React 19:** Utilizing the latest concurrent features.
62+
* **Vite:** For high-performance development and bundling.
63+
* **TypeScript:** Ensuring type safety across the virtual file system and AI service layers.
64+
65+
### Styling & Components
66+
* **Tailwind CSS:** Utility-first styling with extensive custom configuration for shadow and color variables.
67+
* **Lucide React:** Consistent iconography.
68+
* **PrismJS:** Lightweight, robust syntax highlighting.
69+
70+
### Artificial Intelligence
71+
* **Google GenAI SDK:** Direct integration with the Gemini API.
72+
* **Models Used:**
73+
* `gemini-2.5-flash`: Used for high-speed planning and simple queries.
74+
* `gemini-3-pro-preview`: Used for complex reasoning and code generation with extended thinking capabilities.
75+
76+
## Architecture
77+
78+
The application is architected around a central state managing the `VirtualFileSystem`.
79+
80+
1. **Input:** User sends a message via `ChatInterface`.
81+
2. **Orchestration:** `geminiService.ts` determines if the request requires the Agentic loop or a standard single-shot response.
82+
3. **Generation:** The AI generates a response containing both natural language and "Shadow Output" XML blocks.
83+
4. **Parsing:** The `App` component extracts `<file>` tags from the raw response.
84+
5. **State Update:**
85+
* **Simple Mode:** Changes are applied immediately to the VFS.
86+
* **Developer Mode:** Changes are stored as `suggestedChanges`, prompting the user to Review & Apply.
87+
6. **Rendering:** The `Preview` component detects VFS changes, reconstructs the DOM (injecting CSS/JS), and updates the sandboxed `iframe`.
88+
89+
## Application Gallery
90+
91+
A detailed look at the various components and modals within Os-WebDev.
92+
93+
### Developer Environment
94+
<div align="center">
95+
<img src="https://github.com/user-attachments/assets/81b46409-1ef2-4bfc-b115-f57f92afdc08" width="100%" alt="Developer Environment Full View" />
96+
</div>
97+
<br/>
98+
99+
### Agentic Team & Chat
100+
<div align="center">
101+
<img src="https://github.com/user-attachments/assets/0e6f69da-b2de-45ec-b931-34032dd5b167" width="100%" alt="Agentic Chat Interface" />
102+
</div>
103+
<br/>
104+
105+
### Contextual AI Tools & Editor
106+
<div align="center">
107+
<img src="https://github.com/user-attachments/assets/44ffeb61-0a4e-46e7-9266-39a425b0e452" width="100%" alt="Context Menu Tools" />
108+
</div>
109+
<br/>
110+
111+
### File Management & Configuration
112+
<div align="center">
113+
<img src="https://github.com/user-attachments/assets/e77468dc-bbc7-41a5-8ea4-eb1f8e6d87de" width="100%" alt="File Manager" />
114+
</div>
115+
<br/>
116+
117+
### Information & Documentation Modal
118+
<div align="center">
119+
<img src="https://github.com/user-attachments/assets/5a22397c-cd11-4673-8949-43e6e1b144ba" width="100%" alt="Documentation Modal" />
120+
</div>
121+
122+
## Installation
123+
124+
### Prerequisites
125+
* Node.js (v18 or higher)
126+
* npm
127+
128+
### Setup
129+
1. Clone the repository:
130+
```bash
131+
git clone https://github.com/dovvnloading/Os-WebDev.git
132+
cd Os-WebDev
133+
```
134+
135+
2. Install dependencies:
136+
```bash
137+
npm install
138+
```
139+
140+
3. Configure Environment Variables:
141+
Create a `.env` file in the root directory and add your Google Gemini API key:
142+
```env
143+
GEMINI_API_KEY=your_api_key_here
144+
```
145+
146+
4. Run the development server:
147+
```bash
148+
npm run dev
149+
```
150+
151+
## License
152+
153+
This project is licensed under the MIT License. See the `LICENSE` file for details.
154+
155+
---
156+
157+
## Acknowledgments
158+
159+
### Open Source & Community
160+
This project stands on the shoulders of the open-source community. Special thanks to the maintainers and contributors of React, Vite, TailwindCSS, and Lucide.
161+
162+
### Artificial Intelligence
163+
A specific acknowledgment to **Google DeepMind** for the development of the Gemini model family (Flash 2.5 and Pro 3), which provides the reasoning and coding capabilities necessary to drive this environment.
164+
165+
---
166+
167+
*Os-WebDev is a prototype. Use within a secure environment. No backend server is required; all code generation and execution happen locally within the user's browser context.*

0 commit comments

Comments
 (0)