Spaces:

FourLabs-UN2
/

visualage2html-converter

Running

App Files Files Community

FourLabs-UN2 commited on Oct 7, 2025

Commit

427091a

verified ·

1 Parent(s): 6eb7033

Monte com essas cores e sidebar:

Browse files

colors: {
primary: '#21223a',
secondary: '#ff580f',
}

Monte uma aplicação onde o usuário poderá enviar um Visual Age e ele será convertido para HTML. Preciso que do lado esquerdo o usuário faça upload do arquivo .esf e do lado esquerdo mostre a tela visual age emulada com base no arquivo e em baixo uma tela HTML que foi gerada com base na tela simulada do visual age. Adicione um campo para alterar o modelo LLM de conversão, temperatura e um campo de texto para critérios de conversão e layout.

Files changed (2) hide show

README.md +6 -3
index.html +301 -18

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Visualage2html Converter
-emoji: 🐨
 colorFrom: purple
 colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: VisualAge2HTML Converter 🎨
 colorFrom: purple
 colorTo: red
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://deepsite.hf.co).

index.html CHANGED Viewed

@@ -1,19 +1,302 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>VisualAge to HTML Converter</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        primary: '#21223a',
+                        secondary: '#ff580f',
+                    }
+                }
+            }
+        }
+    </script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <style>
+        .sidebar {
+            background: linear-gradient(180deg, #21223a 0%, #1a1b2f 100%);
+            box-shadow: 4px 0 15px rgba(0, 0, 0, 0.1);
+        }
+        .main-content {
+            background: #f8fafc;
+        }
+        .upload-area {
+            border: 2px dashed #cbd5e1;
+            transition: all 0.3s ease;
+        }
+        .upload-area:hover {
+            border-color: #ff580f;
+            background-color: #fef2f2;
+        }
+        .btn-primary {
+            background: linear-gradient(45deg, #21223a, #2d3250);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            background: linear-gradient(45deg, #2d3250, #21223a);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(33, 34, 58, 0.3);
+        }
+        .btn-secondary {
+            background: linear-gradient(45deg, #ff580f, #ff7b3a);
+            transition: all 0.3s ease;
+        }
+        .btn-secondary:hover {
+            background: linear-gradient(45deg, #ff7b3a, #ff580f);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 12px rgba(255, 88, 15, 0.3);
+        }
+        .preview-frame {
+            border: 1px solid #e2e8f0;
+            background: white;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+        }
+        .code-container {
+            background: #1e1e1e;
+            color: #d4d4d4;
+            font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        }
+    </style>
+</head>
+<body class="flex h-screen bg-gray-100">
+    <!-- Sidebar -->
+    <div class="sidebar w-80 flex flex-col h-full text-white">
+        <div class="p-6 border-b border-gray-700">
+            <div class="flex items-center space-x-3">
+                <i data-feather="code" class="text-secondary w-8 h-8"></i>
+                <h1 class="text-2xl font-bold">VisualAge2HTML</h1>
+            </div>
+            <p class="text-gray-400 text-sm mt-2">Converta arquivos .esf para HTML</p>
+        </div>
+        <div class="p-6 flex-1 overflow-y-auto">
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-300 mb-2">
+                    <i data-feather="upload" class="w-4 h-4 inline mr-2"></i>
+                    Upload do Arquivo .esf
+                </label>
+                <div class="upload-area rounded-lg p-6 text-center cursor-pointer mb-4">
+                    <input type="file" id="fileUpload" accept=".esf" class="hidden">
+                    <i data-feather="file-plus" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
+                    <p class="text-gray-400 text-sm">Arraste e solte ou clique para selecionar</p>
+                    <p class="text-xs text-gray-500 mt-1">Apenas arquivos .esf são aceitos</p>
+                </div>
+                <div id="fileInfo" class="hidden bg-gray-800 rounded-lg p-3">
+                    <div class="flex items-center justify-between">
+                        <div class="flex items-center">
+                            <i data-feather="file-text" class="w-5 h-5 text-secondary mr-2"></i>
+                            <span class="text-sm" id="fileName">arquivo.esf</span>
+                        </div>
+                        <button onclick="removeFile()" class="text-red-400 hover:text-red-300">
+                            <i data-feather="x" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-300 mb-2">
+                    <i data-feather="cpu" class="w-4 h-4 inline mr-2"></i>
+                    Configurações do LLM
+                </label>
+                <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm mb-3">
+                    <option value="gpt-4">GPT-4</option>
+                    <option value="gpt-3.5">GPT-3.5 Turbo</option>
+                    <option value="claude">Claude 2</option>
+                    <option value="llama">Llama 2</option>
+                </select>
+                <label class="block text-sm font-medium text-gray-300 mb-2 mt-4">Temperatura</label>
+                <input type="range" min="0" max="1" step="0.1" value="0.7"
+                       class="w-full accent-secondary">
+                <div class="flex justify-between text-xs text-gray-400">
+                    <span>0 (Preciso)</span>
+                    <span>0.7</span>
+                    <span>1 (Criativo)</span>
+                </div>
+            </div>
+            <div class="mb-6">
+                <label class="block text-sm font-medium text-gray-300 mb-2">
+                    <i data-feather="edit-3" class="w-4 h-4 inline mr-2"></i>
+                    Critérios de Conversão
+                </label>
+                <textarea
+                    placeholder="Ex: Use TailwindCSS, componentes responsivos, animações suaves..."
+                    class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-white text-sm h-24 resize-none"
+                ></textarea>
+            </div>
+            <button class="btn-secondary w-full py-3 rounded-lg font-semibold text-white flex items-center justify-center">
+                <i data-feather="play" class="w-5 h-5 mr-2"></i>
+                Converter para HTML
+            </button>
+        </div>
+        <div class="p-4 border-t border-gray-700">
+            <div class="flex items-center justify-between text-xs text-gray-400">
+                <span>Status: <span class="text-green-400">Pronto</span></span>
+                <span>v1.0.0</span>
+            </div>
+        </div>
+    </div>
+    <!-- Main Content -->
+    <div class="main-content flex-1 flex flex-col overflow-hidden">
+        <div class="border-b border-gray-200 px-6 py-4">
+            <h2 class="text-xl font-semibold text-gray-800">Visualização & Resultado</h2>
+        </div>
+        <div class="flex-1 grid grid-cols-2 gap-6 p-6 overflow-y-auto">
+            <!-- Visual Age Emulation -->
+            <div class="bg-white rounded-lg shadow-sm p-4">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="font-semibold text-gray-700 flex items-center">
+                        <i data-feather="monitor" class="w-4 h-4 mr-2 text-primary"></i>
+                        Visual Age Emulado
+                    </h3>
+                    <div class="flex space-x-2">
+                        <button class="p-1 text-gray-400 hover:text-gray-600">
+                            <i data-feather="refresh-cw" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-1 text-gray-400 hover:text-gray-600">
+                            <i data-feather="maximize" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="preview-frame rounded-lg p-4 h-96 overflow-auto">
+                    <div class="text-center text-gray-500 py-16">
+                        <i data-feather="image" class="w-12 h-12 mx-auto mb-3 opacity-50"></i>
+                        <p>Selecione um arquivo .esf para visualizar</p>
+                    </div>
+                </div>
+            </div>
+            <!-- HTML Output -->
+            <div class="bg-white rounded-lg shadow-sm p-4">
+                <div class="flex items-center justify-between mb-4">
+                    <h3 class="font-semibold text-gray-700 flex items-center">
+                        <i data-feather="code" class="w-4 h-4 mr-2 text-secondary"></i>
+                        HTML Gerado
+                    </h3>
+                    <div class="flex space-x-2">
+                        <button class="p-1 text-gray-400 hover:text-gray-600">
+                            <i data-feather="copy" class="w-4 h-4"></i>
+                        </button>
+                        <button class="p-1 text-gray-400 hover:text-gray-600">
+                            <i data-feather="download" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="code-container rounded-lg p-4 h-96 overflow-auto">
+                    <pre class="text-sm"><code class="language-html">&lt;!-- HTML será gerado aqui após a conversão --&gt;</code></pre>
+                </div>
+            </div>
+        </div>
+        <div class="border-t border-gray-200 px-6 py-4">
+            <div class="flex items-center justify-between">
+                <div class="text-sm text-gray-600">
+                    <i data-feather="info" class="w-4 h-4 inline mr-1"></i>
+                    Pronto para converter seu arquivo Visual Age
+                </div>
+                <div class="flex space-x-3">
+                    <button class="px-4 py-2 border border-gray-300 rounded-lg text-sm text-gray-700 hover:bg-gray-50">
+                        Limpar
+                    </button>
+                    <button class="btn-primary px-4 py-2 rounded-lg text-sm text-white">
+                        Exportar Projeto
+                    </button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+        const uploadArea = document.querySelector('.upload-area');
+        const fileInput = document.getElementById('fileUpload');
+        const fileInfo = document.getElementById('fileInfo');
+        const fileName = document.getElementById('fileName');
+        uploadArea.addEventListener('click', () => fileInput.click());
+        uploadArea.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            uploadArea.classList.add('border-secondary', 'bg-red-50');
+        });
+        uploadArea.addEventListener('dragleave', () => {
+            uploadArea.classList.remove('border-secondary', 'bg-red-50');
+        });
+        uploadArea.addEventListener('drop', (e) => {
+            e.preventDefault();
+            uploadArea.classList.remove('border-secondary', 'bg-red-50');
+            const files = e.dataTransfer.files;
+            if (files.length > 0 && files[0].name.endsWith('.esf')) {
+                handleFile(files[0]);
+            }
+        });
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length > 0 && e.target.files[0].name.endsWith('.esf')) {
+                handleFile(e.target.files[0]);
+            }
+        });
+        function handleFile(file) {
+            fileName.textContent = file.name;
+            fileInfo.classList.remove('hidden');
+            // Simular processamento do arquivo .esf
+            simulateVisualAgePreview();
+        }
+        function removeFile() {
+            fileInfo.classList.add('hidden');
+            fileInput.value = '';
+            // Limpar previews
+            document.querySelector('.preview-frame').innerHTML = `
+                <div class="text-center text-gray-500 py-16">
+                    <i data-feather="image" class="w-12 h-12 mx-auto mb-3 opacity-50"></i>
+                    <p>Selecione um arquivo .esf para visualizar</p>
+                </div>
+            `;
+            feather.replace();
+        }
+        function simulateVisualAgePreview() {
+            // Simulação de preview do Visual Age
+            const previewFrame = document.querySelector('.preview-frame');
+            previewFrame.innerHTML = `
+                <div class="bg-blue-50 p-4 rounded">
+                    <div class="bg-white border rounded p-4 mb-4">
+                        <h4 class="font-bold text-blue-800 mb-2">Formulário Simulado</h4>
+                        <div class="space-y-3">
+                            <div>
+                                <label class="block text-sm text-gray-700 mb-1">Nome:</label>
+                                <input type="text" class="border rounded px-2 py-1 w-full" style="border-color: #ccc;">
+                            </div>
+                            <div>
+                                <label class="block text-sm text-gray-700 mb-1">Email:</label>
+                                <input type="email" class="border rounded px-2 py-1 w-full" style="border-color: #ccc;">
+                            </div>
+                            <button class="bg-blue-600 text-white px-4 py-1 rounded text-sm">Enviar</button>
+                        </div>
+                    </div>
+                    <p class="text-xs text-gray-600">Visual Age interface emulada</p>
+                </div>
+            `;
+        }
+    </script>
+</body>
 </html>