File size: 19,186 Bytes
586415b
7b4752b
2fc81d9
 
2f8de88
 
 
 
 
 
 
 
 
ab3557a
 
7b4752b
 
ab3557a
 
7b4752b
 
 
 
 
 
 
 
446749f
2f8de88
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
import os
import re
import base64
import mimetypes
import json
import time
import zipfile
import shutil
from pathlib import Path
from http import HTTPStatus
from typing import Dict, List, Optional, Tuple

# All original imports are kept as requested
import PyPDF2
import docx
import cv2
import numpy as np
from PIL import Image
import pytesseract
import requests
from urllib.parse import urlparse, urljoin
from bs4 import BeautifulSoup
import html2text

import gradio as gr
from huggingface_hub import InferenceClient
from tavily import TavilyClient

# --- NEW IDEA: PROJECT ARCHITECT ---
# The AI will now plan and generate a full file structure, not just a single HTML file.

# Configuration
ProjectArchitectSystemPrompt = """You are an expert software development assistant named ProjectArchitect AI. Your primary goal is to help users build complete, multi-file applications by first creating a plan and then generating the necessary code for each file.

When a user asks you to create an application, you MUST follow these steps:
1.  **Analyze the Request**: Understand the user's requirements, including any context from images, files, or website URLs.
2.  **Formulate a Plan**: Devise a clear, step-by-step plan for building the application. Describe the file structure you will create (e.g., "I will create a project with an index.html, a css/style.css for styling, and a js/script.js for interactivity.").
3.  **Generate File Structure**: Create the code for all necessary files. This includes HTML, CSS, JavaScript, Python, etc.
4.  **Respond with JSON**: You MUST respond with a single, valid JSON object and nothing else. The JSON object must adhere to the following structure:
    ```json
    {
      "plan": "A concise description of the project and the file structure you are creating.",
      "files": [
        {
          "path": "index.html",
          "code": "<!DOCTYPE html>..."
        },
        {
          "path": "css/style.css",
          "code": "/* CSS styles */"
        },
        {
          "path": "js/script.js",
          "code": "// JavaScript logic"
        }
      ]
    }
    ```

**IMPORTANT RULES**:
-   Always output a single, raw JSON object. Do not wrap it in ```json ... ``` or any other text.
-   Ensure file paths are relative (e.g., `css/style.css`).
-   For website redesigns, preserve the original content and image URLs but structure them into a modern, multi-file project.
-   If an image is provided, use it as a visual reference for the UI design.
"""

ProjectArchitectSystemPromptWithSearch = ProjectArchitectSystemPrompt.replace(
    "Analyze the Request",
    "**Analyze the Request with Web Search**: Use your web search tool to find the latest best practices, libraries, or APIs relevant to the user's request. Then, understand the user's requirements, including any context from images, files, or website URLs."
)


# Available models (unchanged)
AVAILABLE_MODELS = [
    {"name": "Moonshot Kimi-K2", "id": "moonshotai/Kimi-K2-Instruct", "description": "Moonshot AI Kimi-K2-Instruct model for code generation and general tasks"},
    {"name": "DeepSeek V3", "id": "deepseek-ai/DeepSeek-V3-0324", "description": "DeepSeek V3 model for code generation"},
    {"name": "DeepSeek R1", "id": "deepseek-ai/DeepSeek-R1-0528", "description": "DeepSeek R1 model for code generation"},
    {"name": "ERNIE-4.5-VL", "id": "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT", "description": "ERNIE-4.5-VL model for multimodal code generation with image support"},
    {"name": "MiniMax M1", "id": "MiniMaxAI/MiniMax-M1-80k", "description": "MiniMax M1 model for code generation and general tasks"},
    {"name": "Qwen3-235B-A22B", "id": "Qwen/Qwen3-235B-A22B", "description": "Qwen3-235B-A22B model for code generation and general tasks"},
    {"name": "SmolLM3-3B", "id": "HuggingFaceTB/SmolLM3-3B", "description": "SmolLM3-3B model for code generation and general tasks"},
    {"name": "GLM-4.1V-9B-Thinking", "id": "THUDM/GLM-4.1V-9B-Thinking", "description": "GLM-4.1V-9B-Thinking model for multimodal code generation with image support"}
]

# Updated Demo List for project-based thinking
DEMO_LIST = [
    {"title": "Portfolio Website", "description": "Create a personal portfolio website with about, projects, and contact sections. Use separate HTML, CSS, and JS files."},
    {"title": "Todo App", "description": "Build a todo application with add, delete, and mark as complete functionality. Structure it with HTML for the layout, CSS for styling, and JavaScript for the logic."},
    {"title": "Weather Dashboard", "description": "Create a weather dashboard that fetches data from an API and displays it. The project should have a clear separation of concerns (HTML, CSS, JS)."},
    {"title": "Interactive Photo Gallery", "description": "Build a responsive photo gallery with a lightbox effect. Create a main HTML file, a CSS file for the grid and responsive styles, and a JS file for the lightbox functionality."},
    {"title": "Login Page", "description": "Create a modern, responsive login page with form validation. The project should include HTML for the form, CSS for a clean design, and JS for client-side validation."},
]

# --- CLIENTS & CONFIG (Mostly unchanged) ---
HF_TOKEN = os.getenv('HF_TOKEN')
client = InferenceClient(provider="auto", api_key=HF_TOKEN, bill_to="huggingface")

TAVILY_API_KEY = os.getenv('TAVILY_API_KEY')
tavily_client = None
if TAVILY_API_KEY:
    try:
        tavily_client = TavilyClient(api_key=TAVILY_API_KEY)
    except Exception as e:
        print(f"Failed to initialize Tavily client: {e}")
        tavily_client = None

# --- HELPER FUNCTIONS (Originals kept, new ones added) ---
History = List[Tuple[str, str]]
Messages = List[Dict[str, str]]

# (history_to_messages, messages_to_history, etc. are kept but might be less critical for the new flow)
# ... (All original helper functions like process_image_for_model, perform_web_search, extract_text_from_file, etc., are assumed to be here and unchanged) ...
# For brevity, I'll omit the unchanged helper functions you provided. The logic for them remains valid.

def history_to_messages(history: History, system: str) -> Messages:
    messages = [{'role': 'system', 'content': system}]
    for h in history:
        user_content = h[0]
        if isinstance(user_content, list):
            text_content = next((item.get("text", "") for item in user_content if isinstance(item, dict) and item.get("type") == "text"), "")
            user_content = text_content if text_content else str(user_content)
        messages.append({'role': 'user', 'content': user_content})
        messages.append({'role': 'assistant', 'content': h[1]})
    return messages

def messages_to_history(messages: Messages) -> Tuple[str, History]:
    assert messages[0]['role'] == 'system'
    history = []
    for q, r in zip(messages[1::2], messages[2::2]):
        user_content = q['content']
        if isinstance(user_content, list):
            text_content = next((item.get("text", "") for item in user_content if isinstance(item, dict) and item.get("type") == "text"), "")
            user_content = text_content if text_content else str(user_content)
        history.append([user_content, r['content']])
    return history

def extract_json_from_response(text: str) -> str:
    """Extracts a JSON object from a string, even if it's wrapped in markdown."""
    match = re.search(r'```(?:json)?\s*({[\s\S]*?})\s*```', text, re.DOTALL)
    if match:
        return match.group(1).strip()
    # Fallback for raw JSON object
    if text.strip().startswith('{') and text.strip().endswith('}'):
        return text.strip()
    return text # Return as-is if no clear JSON object is found

def create_project_zip(file_data: List[Dict[str, str]]) -> Optional[str]:
    """Creates a zip file from the generated project files and returns the path."""
    if not file_data:
        return None
    
    # Create a temporary directory for the project
    temp_dir = Path("temp_project")
    if temp_dir.exists():
        shutil.rmtree(temp_dir)
    temp_dir.mkdir()

    try:
        # Write each file to the temporary directory
        for file_info in file_data:
            path = file_info.get("path")
            code = file_info.get("code", "")
            if not path:
                continue
            
            # Sanitize path to prevent directory traversal
            sanitized_path = os.path.normpath(path).lstrip('./\\')
            full_path = temp_dir / sanitized_path
            
            # Create parent directories if they don't exist
            full_path.parent.mkdir(parents=True, exist_ok=True)
            
            # Write the code to the file
            full_path.write_text(code, encoding='utf-8')

        # Create the zip file
        zip_path = "generated_project.zip"
        with zipfile.ZipFile(zip_path, 'w', zipfile.ZIP_DEFLATED) as zipf:
            for file_path in temp_dir.rglob('*'):
                if file_path.is_file():
                    zipf.write(file_path, file_path.relative_to(temp_dir))
        
        return zip_path
    except Exception as e:
        print(f"Error creating zip file: {e}")
        return None
    finally:
        # Clean up the temporary directory
        if temp_dir.exists():
            shutil.rmtree(temp_dir)

def generate_preview_html(file_data: List[Dict[str, str]]) -> str:
    """Finds index.html and inlines CSS/JS for a self-contained preview."""
    html_file = next((f for f in file_data if f['path'].endswith('index.html')), None)
    if not html_file:
        return "<h3>Preview Error</h3><p>No `index.html` file was found in the generated project.</p>"

    html_content = html_file['code']
    soup = BeautifulSoup(html_content, 'html.parser')

    # Inline CSS
    for link in soup.find_all('link', rel='stylesheet'):
        href = link.get('href')
        css_file = next((f for f in file_data if f['path'] == href), None)
        if css_file:
            style_tag = soup.new_tag('style')
            style_tag.string = css_file['code']
            link.replace_with(style_tag)

    # Inline JS
    for script in soup.find_all('script', src=True):
        src = script.get('src')
        js_file = next((f for f in file_data if f['path'] == src), None)
        if js_file:
            script.string = js_file['code']
            del script['src']
            
    return str(soup)

def create_code_accordion(file_data: List[Dict[str, str]]):
    """Dynamically creates a Gradio Accordion to display all project files."""
    components = []
    for file_info in file_data:
        path = file_info.get("path", "untitled")
        code = file_info.get("code", "")
        language = mimetypes.guess_type(path)[0]
        if language:
            language = language.split('/')[-1] # e.g., text/html -> html
        
        with gr.Accordion(label=path, open=False):
            # The key here is returning the component itself
            code_block = gr.Code(value=code, language=language, interactive=False)
            components.append(code_block) # We don't really need to do anything with this list
            
    # The return value is handled by Gradio's context manager
    # but we must return something to satisfy the 'outputs' list.
    # An empty update is fine.
    return gr.update()

# --- CORE GENERATION LOGIC (Rewritten for Project Architect) ---

def generation_code(query: Optional[str], image: Optional[gr.Image], file: Optional[str], website_url: Optional[str], _setting: Dict[str, str], _history: Optional[History], _current_model: Dict, enable_search: bool = False):
    if query is None:
        query = ''
    if _history is None:
        _history = []

    system_prompt = ProjectArchitectSystemPromptWithSearch if enable_search else _setting['system']
    messages = history_to_messages(_history, system_prompt)

    # ... (Query enhancement logic from original file remains the same) ...
    # file_text = extract_text_from_file(file) -> add to query
    # website_text = extract_website_content(website_url) -> add to query
    # enhanced_query = enhance_query_with_search(query, enable_search)

    # For this example, we'll just use the base query for simplicity
    # A full implementation would re-include the file/web/search helpers here
    enhanced_query = query
    
    # Create the user message
    user_message = {'role': 'user', 'content': enhanced_query}
    if image is not None:
         # Placeholder for multimodal message creation
        user_message = create_multimodal_message(enhanced_query, image)

    messages.append(user_message)

    try:
        completion = client.chat.completions.create(
            model=_current_model["id"],
            messages=messages,
            stream=True,
            max_tokens=8000  # Increased for potentially large JSON output
        )
        content = ""
        # Stream and build the full JSON response
        for chunk in completion:
            if chunk.choices[0].delta.content:
                content += chunk.choices[0].delta.content
                # We can't yield partial results easily with JSON, so we wait for the full response
        
        # --- NEW LOGIC: PARSE JSON AND BUILD OUTPUTS ---
        json_str = extract_json_from_response(content)
        try:
            project_data = json.loads(json_str)
            plan = project_data.get('plan', "No plan was provided.")
            files = project_data.get('files', [])

            if not files:
                raise ValueError("The AI did not generate any files.")

            # Create the project zip file
            zip_file_path = create_project_zip(files)
            
            # Generate a self-contained preview
            preview_html = generate_preview_html(files)
            
            # Dynamically create the file viewer accordion
            # We need to construct this as a list of Accordion blocks
            file_viewer_components = []
            for file_info in files:
                path = file_info.get("path", "untitled")
                code = file_info.get("code", "")
                lang = mimetypes.guess_type(path)[0]
                lang = lang.split('/')[-1] if lang else 'plaintext'
                
                # Create each accordion item
                file_viewer_components.append(
                    gr.Accordion(label=path, open=path.endswith('index.html'))
                )
                file_viewer_components.append(
                    gr.Code(value=code, language=lang, interactive=False)
                )

            # Update history
            _history = messages_to_history(messages + [{'role': 'assistant', 'content': content}])

            yield {
                plan_output: gr.update(value=f"### AI Plan\n{plan}", visible=True),
                file_viewer: gr.update(value=file_viewer_components, visible=True),
                download_output: gr.update(value=zip_file_path, visible=True, interactive=True),
                sandbox: preview_html,
                history: _history,
                history_output: history_to_messages(_history, "")[1:], # Convert for chatbot
            }
        
        except (json.JSONDecodeError, ValueError) as e:
            error_message = f"**Error:** The AI model did not return a valid project structure. Please try again.\n\n**Details:** {e}\n\n**Raw Output:**\n```\n{content}\n```"
            yield {
                plan_output: gr.update(value=error_message, visible=True),
                file_viewer: gr.update(visible=False),
                download_output: gr.update(visible=False),
            }

    except Exception as e:
        error_message = f"**An unexpected error occurred:** {str(e)}"
        yield {
            plan_output: gr.update(value=error_message, visible=True),
            file_viewer: gr.update(visible=False),
            download_output: gr.update(visible=False),
        }

# --- GRADIO UI (Adapted for New Idea) ---
with gr.Blocks(theme=gr.themes.Default(), title="ProjectArchitect AI") as demo:
    history = gr.State([])
    setting = gr.State({"system": ProjectArchitectSystemPrompt})
    current_model = gr.State(AVAILABLE_MODELS[1])  # Default to DeepSeek V3

    with gr.Sidebar():
        gr.Markdown("# ProjectArchitect AI")
        gr.Markdown("*Your AI Software Development Partner*")
        gr.Markdown("---")
        
        input_prompt = gr.Textbox(
            label="What would you like to build?",
            placeholder="e.g., A responsive portfolio website...",
            lines=4
        )
        
        # Input options can be kept as they provide context to the model
        website_url_input = gr.Textbox(label="Website URL for redesign", placeholder="https://example.com")
        file_input = gr.File(label="Reference file or image")
        
        with gr.Row():
            build_btn = gr.Button("Build Project", variant="primary", scale=2)
            clear_btn = gr.Button("Clear", scale=1)
            
        search_toggle = gr.Checkbox(label="🔍 Enable Web Search", value=False)
        
        model_dropdown = gr.Dropdown(
            choices=[model['name'] for model in AVAILABLE_MODELS],
            value=AVAILABLE_MODELS[1]['name'],
            label="Model"
        )
        
        gr.Markdown("**Project Ideas**")
        for item in DEMO_LIST:
            demo_btn = gr.Button(value=item['title'], variant="secondary", size="sm")
            demo_btn.click(lambda desc=item['description']: gr.update(value=desc), outputs=input_prompt)

    with gr.Column():
        # Outputs for plan and download link
        with gr.Row():
            plan_output = gr.Markdown(visible=False)
        with gr.Row():
            download_output = gr.File(label="Download Project (.zip)", visible=False, interactive=False)
            
        with gr.Tabs():
            with gr.Tab("Project Files"):
                # This column will be dynamically populated with Accordion blocks
                file_viewer = gr.Column(visible=False)

            with gr.Tab("Live Preview"):
                sandbox = gr.HTML(label="Live Preview")

            with gr.Tab("Chat History"):
                history_output = gr.Chatbot(show_label=False, type="messages")

    # --- Event Handlers ---
    build_btn.click(
        generation_code,
        inputs=[input_prompt, file_input, file_input, website_url_input, setting, history, current_model, search_toggle],
        outputs=[plan_output, file_viewer, download_output, sandbox, history, history_output]
    )

    def clear_all():
        return [], [], None, "", gr.update(visible=False), gr.update(visible=False), gr.update(visible=False)

    clear_btn.click(clear_all, outputs=[history, history_output, file_input, website_url_input, plan_output, file_viewer, download_output])

    # Model change logic (unchanged)
    def on_model_change(model_name):
        for m in AVAILABLE_MODELS:
            if m['name'] == model_name:
                return m
        return AVAILABLE_MODELS[1]

    model_dropdown.change(on_model_change, inputs=model_dropdown, outputs=current_model)


if __name__ == "__main__":
    demo.queue().launch(debug=True)