#!/usr/bin/env python3 """ Simple web interface for Tailwind Site Rebuilder """ import os import json import subprocess from flask import Flask, render_template_string, request, redirect, url_for, flash, send_from_directory app = Flask(__name__) app.secret_key = "tailwind_rebuilder_secret_key" # For flash messages # Base directory BASE_DIR = os.path.dirname(os.path.abspath(__file__)) # HTML template embedded in the app for simplicity HTML_TEMPLATE = """ Tailwind Site Rebuilder

Analyzing website... This may take a few moments.

Tailwind Site Rebuilder

{% for message in get_flashed_messages(with_categories=true) %}
{{ message[1] }}
{% endfor %}
{% if rebuild_context %}

Screenshot

{% if screenshot_path %} Website Screenshot {% else %}

No screenshot available

{% endif %}

Analysis Results

Site Information

Title: {{ rebuild_context.site_info.title }}

Domain: {{ rebuild_context.site_info.domain }}

URL: {{ rebuild_context.site_info.url }}

Analyzed: {{ rebuild_context.site_info.analyzed_at }}

{% if rebuild_context.site_info.layout_patterns %}

Layout Patterns:

    {% for key, value in rebuild_context.site_info.layout_patterns.items() %}
  • {{ key }}: {{ value }}
    • {% endfor %}
{% endif %}

Tailwind Rebuild Notes

General: {{ rebuild_context.tailwind_rebuild_notes.general }}

Layout: {{ rebuild_context.tailwind_rebuild_notes.layout }}

Components:

    {% for key, value in rebuild_context.tailwind_rebuild_notes.components.items() %}
  • {{ key }}: {{ value }}
    • {% endfor %}

Responsive Breakpoints:

    {% for key, value in rebuild_context.tailwind_rebuild_notes.responsive_breakpoints.items() %}
  • {{ key }}: {{ value }}
    • {% endfor %}

Page Sections

{% for section in rebuild_context.layout.sections %}

{{ section.type|capitalize }} Section

+

Content Preview: {{ section.content_preview }}

{% if section.pattern %}

Pattern: {{ section.pattern }}

{% endif %}

Tailwind Notes: {{ section.tailwind_notes }}

{% if section.ai_comment %}
AI Analysis

Location: {{ section.ai_comment.location }}

Style: {{ section.ai_comment.style }}

Implementation: {{ section.ai_comment.implementation }}

{% if section.ai_comment.logo %}

Logo Analysis: {{ section.ai_comment.logo }}

{% endif %}
{% endif %} {% if section.logo %}
Logo Details

Position: {{ section.logo.position }}

Dimensions: {{ section.logo.dimensions.width }}x{{ section.logo.dimensions.height }}

{% if section.logo.src %}

Source: {{ section.logo.src }}

{% endif %}
{% endif %}
{% endfor %}

Colors

Background Colors:

    {% for color in rebuild_context.design.colors.background %}
  • {{ color }}
    • {% endfor %}

Text Colors:

    {% for color in rebuild_context.design.colors.text %}
  • {{ color }}
    • {% endfor %}

Accent Colors:

    {% for color in rebuild_context.design.colors.accent %}
  • {{ color }}
    • {% endfor %}

Suggested Tailwind Colors:

    {% for key, value in rebuild_context.design.colors.suggested_tailwind.items() %}
  • {{ key }}: {{ value }}
    • {% endfor %}

Typography

Fonts:

    {% for font in rebuild_context.design.typography.fonts %}
  • {{ font }}
    • {% endfor %}

Headings:

    {% for tag, styles in rebuild_context.design.typography.headings.items() %}
  • {{ tag }}:
      {% for prop, value in styles.items() %}
    • {{ prop }}: {{ value }}
      • {% endfor %}
    • {% endfor %}
{% if rebuild_context.ai_verification %}

AI Verification

Verified at: {{ rebuild_context.ai_verification.verified_at }}

{% if rebuild_context.ai_verification.sections_analysis %}

Sections Analysis

{{ rebuild_context.ai_verification.sections_analysis }}
{% endif %} {% if rebuild_context.ai_verification.layout_assessment %}

Layout Assessment

{{ rebuild_context.ai_verification.layout_assessment }}
{% endif %} {% if rebuild_context.ai_verification.logo_and_branding %}

Logo & Branding

{{ rebuild_context.ai_verification.logo_and_branding }}
{% endif %} {% if rebuild_context.ai_verification.color_analysis %}

Color Analysis

{{ rebuild_context.ai_verification.color_analysis }}
{% endif %} {% if rebuild_context.ai_verification.responsive_strategy %}

Responsive Strategy

{{ rebuild_context.ai_verification.responsive_strategy }}
{% endif %} {% if rebuild_context.ai_verification.tailwind_recommendations %}

Tailwind Recommendations

{{ rebuild_context.ai_verification.tailwind_recommendations }}
{% endif %}
{% else %}

No AI verification data available.

{% endif %}

Tailwind Rebuild Prompts

These prompts are engineered to help you rebuild the analyzed site using Tailwind CSS.

Customize Prompt Focus

Select areas to emphasize in the prompt:

Complete Site Rebuild Prompt

Component-Specific Prompts

{% for section in rebuild_context.layout.sections %}
{{ section.type|capitalize }} Section
{% endfor %}

Raw JSON

{{ json_data }}
{% endif %} """ @app.route('/') def index(): """Home page""" # Check if there's a recent analysis output_dir = os.path.join(BASE_DIR, "output_with_ai") context_file = os.path.join(output_dir, "rebuild_context.json") rebuild_context = None screenshot_path = None screenshot_filename = None json_data = "" if os.path.exists(context_file): try: with open(context_file, 'r') as f: rebuild_context = json.load(f) json_data = json.dumps(rebuild_context) # Find the most recent screenshot screenshots_dir = os.path.join(output_dir, "screenshots") if os.path.exists(screenshots_dir): screenshot_files = [f for f in os.listdir(screenshots_dir) if f.endswith((".png", ".jpg", ".svg"))] if screenshot_files: # Sort by modification time, newest first screenshot_files.sort(key=lambda x: os.path.getmtime(os.path.join(screenshots_dir, x)), reverse=True) screenshot_filename = screenshot_files[0] screenshot_path = os.path.join(screenshots_dir, screenshot_filename) app.logger.info(f"Using latest screenshot: {screenshot_filename}") except Exception as e: flash(f"Error loading previous analysis: {str(e)}", "error") return render_template_string( HTML_TEMPLATE, rebuild_context=rebuild_context, screenshot_path=screenshot_path, screenshot_filename=screenshot_filename, json_data=json_data ) @app.route('/analyze', methods=['POST']) def analyze(): """Run analysis on submitted URL""" url = request.form.get('url') use_ai = 'use_ai' in request.form if not url: flash("Please enter a URL to analyze") return redirect(url_for('index')) try: # Prepare the command cmd = ["./demo-verify.sh", url] # Set environment variable for AI if needed env = os.environ.copy() if not use_ai: env["SKIP_AI"] = "1" # Log the command being executed app.logger.info(f"Executing command: {' '.join(cmd)}") # Run the analysis with real-time output capture process = subprocess.Popen( cmd, stdout=subprocess.PIPE, stderr=subprocess.PIPE, env=env, text=True, bufsize=1 ) # Capture output stdout_output = [] stderr_output = [] # Read output in real-time for line in process.stdout: app.logger.info(f"STDOUT: {line.strip()}") stdout_output.append(line) # Read any error output for line in process.stderr: app.logger.error(f"STDERR: {line.strip()}") stderr_output.append(line) # Wait for process to complete process.wait() # Check return code if process.returncode != 0: error_msg = ''.join(stderr_output) flash(f"Error running analysis: {error_msg}", "error") app.logger.error(f"Process failed with return code {process.returncode}") return redirect(url_for('index')) # Log success stdout_str = ''.join(stdout_output) app.logger.info(f"Analysis completed successfully. Output: {stdout_str}") flash(f"Analysis of {url} completed successfully!", "success") return redirect(url_for('index')) except Exception as e: app.logger.exception(f"Exception during analysis: {str(e)}") flash(f"Error: {str(e)}", "error") return redirect(url_for('index')) @app.route('/screenshots/') def serve_screenshot(filename): """Serve screenshot images""" screenshots_dir = os.path.join(BASE_DIR, "output_with_ai", "screenshots") return send_from_directory(screenshots_dir, filename) if __name__ == '__main__': app.run(debug=True, host='0.0.0.0', port=5000)