Create utils_html.py

utils_html.py

@@ -0,0 +1,103 @@
+HTML_TEMPLATE = """
+<style>
+    body {
+        background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
+    }
+    #app-header {
+        text-align: center;
+        background: rgba(255, 255, 255, 0.8); /* Semi-transparent white */
+        padding: 20px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        position: relative; /* To position the artifacts */
+    }
+    #app-header h1 {
+        color: #4CAF50;
+        font-size: 2em;
+        margin-bottom: 10px;
+    }
+    .concept {
+        position: relative;
+        transition: transform 0.3s;
+    }
+    .concept:hover {
+        transform: scale(1.1);
+    }
+    .concept img {
+        width: 100px;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    }
+    .concept-description {
+        position: absolute;
+        bottom: -30px;
+        left: 50%;
+        transform: translateX(-50%);
+        background-color: #4CAF50;
+        color: white;
+        padding: 5px 10px;
+        border-radius: 5px;
+        opacity: 0;
+        transition: opacity 0.3s;
+    }
+    .concept:hover .concept-description {
+        opacity: 1;
+    }
+    /* Artifacts */
+    .artifact {
+        position: absolute;
+        background: rgba(76, 175, 80, 0.1); /* Semi-transparent green */
+        border-radius: 50%; /* Make it circular */
+    }
+    .artifact.large {
+        width: 300px;
+        height: 300px;
+        top: -50px;
+        left: -150px;
+    }
+    .artifact.medium {
+        width: 200px;
+        height: 200px;
+        bottom: -50px;
+        right: -100px;
+    }
+    .artifact.small {
+        width: 100px;
+        height: 100px;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+    }
+</style>
+<div id="app-header">
+    <!-- Artifacts -->
+    <div class="artifact large"></div>
+    <div class="artifact medium"></div>
+    <div class="artifact small"></div>
+    <!-- Content -->
+    <h1>Casa AI</h1>
+    <p>ReImagine your spaces.</p>
+    <div style="display: flex; justify-content: center; gap: 20px; margin-top: 20px;">
+        <div class="concept">
+            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/5f6668df-7806-4b25-8d3e-ab1d51940a4d" alt="Rustic Style">
+            <div class="concept-description">Rustic and Farmhouse</div>
+        </div>
+        <div class="concept">
+            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/8e656841-df89-446b-9285-9532dab23023" alt="Art Deco">
+            <div class="concept-description">Art Deco and Coastal</div>
+        </div>
+        <div class="concept">
+            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/526ae86d-4c1c-496c-b2c3-cd808ffc6161" alt="Scandinavian">
+            <div class="concept-description">Minimalist Scandinavian</div>
+        </div>
+        <div class="concept">
+            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/503760a4-412c-455d-a5fa-27b616e25ca8" alt="Japanese">
+            <div class="concept-description">Japanese Style</div>
+        </div>
+        <div class="concept">
+            <img src="https://github.com/Capybara-AI/Image-Caption-Editor/assets/11761529/45c4299f-b8a5-4bae-8435-62af5ed1d238" alt="Traditional">
+            <div class="concept-description">Traditional</div>
+        </div>
+    </div>
+</div>
+"""