Update app.py
Browse files
app.py
CHANGED
|
@@ -1,5 +1,5 @@
|
|
| 1 |
# The Digital Phoenix Project: Resurrect & Reimagine Digital Artifacts
|
| 2 |
-
# Expert Rewrite by an AI Systems Analyst (Version 1.
|
| 3 |
|
| 4 |
# --- Core Imports ---
|
| 5 |
import os
|
|
@@ -32,7 +32,6 @@ from tavily import TavilyClient
|
|
| 32 |
# I. PROJECT CONFIGURATION & CORE IDENTITY
|
| 33 |
# =====================================================================================
|
| 34 |
|
| 35 |
-
# **MODIFIED:** Added instruction for better code organization within the single file.
|
| 36 |
SystemPrompt = """You are the 'Phoenix-AI', a specialist in digital archaeology and modernization. Your purpose is to take legacy digital artifacts—outdated websites, old documents, UI screenshots—and resurrect them into stunning, modern, and responsive web applications.
|
| 37 |
When a user presents you with an artifact, you must:
|
| 38 |
1. **Analyze the Artifact:** Meticulously examine the provided content.
|
|
@@ -87,7 +86,7 @@ if TAVILY_API_KEY:
|
|
| 87 |
tavily_client = None
|
| 88 |
|
| 89 |
# =====================================================================================
|
| 90 |
-
# III. DATA PROCESSING & HELPER FUNCTIONS
|
| 91 |
# =====================================================================================
|
| 92 |
|
| 93 |
def history_to_messages(history: History, system: str) -> Messages:
|
|
@@ -148,7 +147,7 @@ def create_multimodal_message(text: str, image: Optional[np.ndarray]) -> Dict:
|
|
| 148 |
return {"role": "user", "content": content}
|
| 149 |
|
| 150 |
# =====================================================================================
|
| 151 |
-
# IV. ADVANCED ARTIFACT ANALYSIS & EXTRACTION
|
| 152 |
# =====================================================================================
|
| 153 |
|
| 154 |
def perform_web_search(query: str) -> str:
|
|
@@ -226,14 +225,16 @@ def extract_website_content(url: str) -> str:
|
|
| 226 |
return f"ERROR: A full excavation of '{url}' failed. Details: {e}"
|
| 227 |
|
| 228 |
# =====================================================================================
|
| 229 |
-
# V. CORE GENERATION LOGIC & SANDBOXING
|
| 230 |
# =====================================================================================
|
| 231 |
|
| 232 |
def send_to_sandbox(code: str) -> str:
|
|
|
|
|
|
|
| 233 |
wrapped_code = f'<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>{code}</body></html>'
|
| 234 |
encoded_html = base64.b64encode(wrapped_code.encode('utf-8')).decode('utf-8')
|
| 235 |
data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
|
| 236 |
-
return f'<iframe src="{data_uri}" width="100%" height="
|
| 237 |
|
| 238 |
def generation_code(query: str, image: np.ndarray, file_obj: object, website_url: str, _setting: dict, _history: list, _current_model: dict, enable_search: bool, components: dict):
|
| 239 |
code_output, history_output, history_state, sandbox = components.values()
|
|
@@ -272,9 +273,12 @@ def generation_code(query: str, image: np.ndarray, file_obj: object, website_url
|
|
| 272 |
# =====================================================================================
|
| 273 |
# VI. GRADIO USER INTERFACE
|
| 274 |
# =====================================================================================
|
|
|
|
|
|
|
| 275 |
with gr.Blocks(
|
| 276 |
theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, secondary_hue=gr.themes.colors.blue, neutral_hue=gr.themes.colors.gray),
|
| 277 |
-
css=".gradio-container { max-width: 95% !important; }
|
|
|
|
| 278 |
) as demo:
|
| 279 |
|
| 280 |
history = gr.State([])
|
|
@@ -304,14 +308,16 @@ with gr.Blocks(
|
|
| 304 |
system_prompt_input = gr.Textbox(value=SystemPrompt, label="System Prompt", lines=10)
|
| 305 |
|
| 306 |
with gr.Column(scale=3):
|
| 307 |
-
# **MODIFIED:** Tab order changed, and height is now constrained for better usability.
|
| 308 |
with gr.Tabs():
|
| 309 |
with gr.Tab("Live Preview", id="preview"):
|
| 310 |
-
|
|
|
|
| 311 |
with gr.Tab("Resurrected Code", id="code"):
|
| 312 |
-
|
|
|
|
| 313 |
with gr.Tab("Session Log", id="history"):
|
| 314 |
-
|
|
|
|
| 315 |
|
| 316 |
components = { "code": code_output, "history_log": history_output, "history_state": history, "sandbox": sandbox }
|
| 317 |
|
|
|
|
| 1 |
# The Digital Phoenix Project: Resurrect & Reimagine Digital Artifacts
|
| 2 |
+
# Expert Rewrite by an AI Systems Analyst (Version 1.5 - Runtime Fix)
|
| 3 |
|
| 4 |
# --- Core Imports ---
|
| 5 |
import os
|
|
|
|
| 32 |
# I. PROJECT CONFIGURATION & CORE IDENTITY
|
| 33 |
# =====================================================================================
|
| 34 |
|
|
|
|
| 35 |
SystemPrompt = """You are the 'Phoenix-AI', a specialist in digital archaeology and modernization. Your purpose is to take legacy digital artifacts—outdated websites, old documents, UI screenshots—and resurrect them into stunning, modern, and responsive web applications.
|
| 36 |
When a user presents you with an artifact, you must:
|
| 37 |
1. **Analyze the Artifact:** Meticulously examine the provided content.
|
|
|
|
| 86 |
tavily_client = None
|
| 87 |
|
| 88 |
# =====================================================================================
|
| 89 |
+
# III. DATA PROCESSING & HELPER FUNCTIONS (No changes in this section)
|
| 90 |
# =====================================================================================
|
| 91 |
|
| 92 |
def history_to_messages(history: History, system: str) -> Messages:
|
|
|
|
| 147 |
return {"role": "user", "content": content}
|
| 148 |
|
| 149 |
# =====================================================================================
|
| 150 |
+
# IV. ADVANCED ARTIFACT ANALYSIS & EXTRACTION (No changes in this section)
|
| 151 |
# =====================================================================================
|
| 152 |
|
| 153 |
def perform_web_search(query: str) -> str:
|
|
|
|
| 225 |
return f"ERROR: A full excavation of '{url}' failed. Details: {e}"
|
| 226 |
|
| 227 |
# =====================================================================================
|
| 228 |
+
# V. CORE GENERATION LOGIC & SANDBOXING (No changes in this section)
|
| 229 |
# =====================================================================================
|
| 230 |
|
| 231 |
def send_to_sandbox(code: str) -> str:
|
| 232 |
+
# Use a fixed height for the iframe itself for consistency
|
| 233 |
+
iframe_height = "800px"
|
| 234 |
wrapped_code = f'<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body>{code}</body></html>'
|
| 235 |
encoded_html = base64.b64encode(wrapped_code.encode('utf-8')).decode('utf-8')
|
| 236 |
data_uri = f"data:text/html;charset=utf-8;base64,{encoded_html}"
|
| 237 |
+
return f'<iframe src="{data_uri}" width="100%" height="{iframe_height}" sandbox="allow-scripts allow-same-origin allow-forms"></iframe>'
|
| 238 |
|
| 239 |
def generation_code(query: str, image: np.ndarray, file_obj: object, website_url: str, _setting: dict, _history: list, _current_model: dict, enable_search: bool, components: dict):
|
| 240 |
code_output, history_output, history_state, sandbox = components.values()
|
|
|
|
| 273 |
# =====================================================================================
|
| 274 |
# VI. GRADIO USER INTERFACE
|
| 275 |
# =====================================================================================
|
| 276 |
+
|
| 277 |
+
# **FIX 1:** Added a CSS rule to control the height of the HTML component's container.
|
| 278 |
with gr.Blocks(
|
| 279 |
theme=gr.themes.Base(primary_hue=gr.themes.colors.orange, secondary_hue=gr.themes.colors.blue, neutral_hue=gr.themes.colors.gray),
|
| 280 |
+
css=".gradio-container { max-width: 95% !important; } #sandbox_preview { height: 800px; }",
|
| 281 |
+
title="The Digital Phoenix Project"
|
| 282 |
) as demo:
|
| 283 |
|
| 284 |
history = gr.State([])
|
|
|
|
| 308 |
system_prompt_input = gr.Textbox(value=SystemPrompt, label="System Prompt", lines=10)
|
| 309 |
|
| 310 |
with gr.Column(scale=3):
|
|
|
|
| 311 |
with gr.Tabs():
|
| 312 |
with gr.Tab("Live Preview", id="preview"):
|
| 313 |
+
# **FIX 2:** Removed invalid `height` argument and added `elem_id` for CSS targeting.
|
| 314 |
+
sandbox = gr.HTML(label="Live Preview of Resurrected Artifact", elem_id="sandbox_preview")
|
| 315 |
with gr.Tab("Resurrected Code", id="code"):
|
| 316 |
+
# height is a valid argument here
|
| 317 |
+
code_output = gr.Code(language="html", label="Generated HTML/CSS/JS", interactive=True, height=780)
|
| 318 |
with gr.Tab("Session Log", id="history"):
|
| 319 |
+
# height is a valid argument here
|
| 320 |
+
history_output = gr.Chatbot(show_label=False, height=780, layout="panel")
|
| 321 |
|
| 322 |
components = { "code": code_output, "history_log": history_output, "history_state": history, "sandbox": sandbox }
|
| 323 |
|