ui changes

app.py

@@ -74,95 +74,99 @@ def validate_license_key(license_key):
 content_html = """
 <div style="text-align: center; margin-top: 30px;">
     <h2 style="font-size: 24px; margin-bottom: 20px;">Slidegen Examples</h2>
-    <div style="display: flex; justify-content: space-between; align-items: flex-start; margin: 20px auto; max-width: 90%;">
-        <!-- Portrait video on the left -->
-        <div style="width: 30%; padding-right: 20px;">
-            <video controls style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
-                <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
-                Your browser does not support the video tag.
-            </video>
-            <p style="margin-top: 10px; font-size: 14px; color: #666;">Mobile Portrait Layout</p>
+    
+    <!-- Wrapper with responsive styles -->
+    <style>
+        @media (max-width: 768px) {
+            .slidegen-container {
+                flex-direction: column-reverse !important;
+            }
+            .video-container {
+                margin-right: 0 !important;
+                margin-top: 25px !important;
+                width: 100% !important;
+                max-width: 300px !important;
+                margin-left: auto !important;
+                margin-right: auto !important;
+            }
+            .carousel-container {
+                width: 100% !important;
+            }
+        }
+    </style>
+    
+    <div style="margin: 20px auto; max-width: 95%; position: relative; display: flex; align-items: flex-start;" class="slidegen-container">
+        <!-- Stationary Tutorial Video on the left (on desktop) or bottom (on mobile) -->
+        <div style="flex: 0 0 180px; margin-right: 25px;" class="video-container">
+            <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                <video controls controlsList="nodownload" playsinline style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                    <source src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/IxuuqPhmIX3Jggqkeiseb.mp4" type="video/mp4">
+                    Your browser does not support the video tag.
+                </video>
+            </div>
+            <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Tutorial Video</p>
         </div>
         
-        <!-- Grid of images on the right -->
-        <div style="width: 65%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
-            <!-- Actual images -->
-            <div style="width: 100%;">
-                <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Square Layout" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Square Layout</p>
+        <!-- Scrollable carousel container for other items -->
+        <div style="flex: 1; overflow-x: auto; white-space: nowrap; padding: 0; scrollbar-width: thin; scrollbar-color: #4a5568 #1a2438;" class="carousel-container">
+            <!-- Screenshots (1280x800) -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745556423/Slidegen/bgpt-faveimage_20241230061609_nbrjb5.png" alt="Screenshot Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                </div>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Screenshots (1280x800)</p>
             </div>
             
-            <div style="width: 100%;">
-                <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Mobile Landscape" style="width: 100%; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.2);">
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Mobile Landscape</p>
+            <!-- Square Layout -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 220px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/f4xH6ZNx1rVbKzr8jAHmt.png" alt="Square Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
+                </div>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Square Layout</p>
             </div>
             
-            <!-- Placeholder for Screenshot layout -->
-            <div style="width: 100%;">
-                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
-                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
-                            <span style="font-size: 24px; color: #888;">+</span>
-                        </div>
-                        <p style="margin: 0; font-size: 14px; color: #888;">Screenshot Layout</p>
-                    </div>
+            <!-- Custom Size -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745556411/Slidegen/exploring-host-cities_lp6dy8.png" alt="Custom Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                 </div>
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Screenshots (1280x800)</p>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Custom Size</p>
             </div>
             
-            <!-- Placeholder for Custom layout -->
-            <div style="width: 100%;">
-                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
-                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
-                            <span style="font-size: 24px; color: #888;">+</span>
-                        </div>
-                        <p style="margin: 0; font-size: 14px; color: #888;">Custom Layout</p>
-                    </div>
+            <!-- Mobile Landscape -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://cdn-uploads.huggingface.co/production/uploads/644252f59a5bbb07ab7a987a/A9BoWW2ulZycv0OQaihKO.png" alt="Mobile Landscape" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                 </div>
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Custom Size</p>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Mobile Landscape</p>
             </div>
             
-            <!-- Placeholder for Instagram layout -->
-            <div style="width: 100%;">
-                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
-                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
-                            <span style="font-size: 24px; color: #888;">+</span>
-                        </div>
-                        <p style="margin: 0; font-size: 14px; color: #888;">Instagram</p>
-                    </div>
+            <!-- Twitter Post -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 220px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745556418/Slidegen/browsergpt-cartoon-ad_xodysb.png" alt="Twitter Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                 </div>
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Instagram Story (1080x1920)</p>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Twitter Post (1200x675)</p>
             </div>
             
-            <!-- Placeholder for Twitter layout -->
-            <div style="width: 100%;">
-                <div style="width: 100%; height: 0; padding-bottom: 62.5%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
-                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
-                            <span style="font-size: 24px; color: #888;">+</span>
-                        </div>
-                        <p style="margin: 0; font-size: 14px; color: #888;">Twitter</p>
-                    </div>
+            <!-- Landscape Article Image -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745558123/Slidegen/article_image_1745215220129_32yqnq_ldeyft.png" alt="Landscape Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                 </div>
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Twitter Post (1200x675)</p>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Landscape Article Image</p>
             </div>
             
-            <!-- Placeholder for Tablet layout -->
-            <div style="width: 100%;">
-                <div style="width: 100%; height: 0; padding-bottom: 70%; background-color: #f0f0f0; border-radius: 8px; position: relative; box-shadow: 0 4px 8px rgba(0,0,0,0.1);">
-                    <div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center;">
-                        <div style="width: 50px; height: 50px; margin: 0 auto 10px; border-radius: 50%; background-color: #ddd; display: flex; align-items: center; justify-content: center;">
-                            <span style="font-size: 24px; color: #888;">+</span>
-                        </div>
-                        <p style="margin: 0; font-size: 14px; color: #888;">Tablet</p>
-                    </div>
+            <!-- Landscape Layout -->
+            <div style="display: inline-block; vertical-align: top; margin-right: 25px; width: 280px;">
+                <div style="height: 220px; display: flex; align-items: center; justify-content: center; margin-bottom: 5px;">
+                    <img src="https://res.cloudinary.com/dol2onsxl/image/upload/v1745558119/Slidegen/1692111223459-153ucd_hibeys.png" alt="Landscape Layout" style="max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.1);">
                 </div>
-                <p style="margin-top: 5px; font-size: 14px; color: #666;">Tablet (2280x1600)</p>
+                <p style="margin-top: 5px; font-size: 14px; color: #666; text-align: center;">Landscape Layout</p>
             </div>
         </div>
     </div>
+    <p style="margin-top: 15px; font-size: 14px; color: #888; text-align: center;">← Scroll horizontally to see more layouts →</p>
     <p style="margin-top: 20px; font-size: 16px; color: #666;">Choose a layout that suits your needs from the examples above</p>
 </div>
 """
@@ -224,25 +228,6 @@ Feature Image Background Color (Optional): i.e #008000
 """
 
 
-# Escape default_value for JavaScript
-escaped_default_value = default_value.replace('\n', '\\n').replace('\'', '\\\'')
-js = f'''
-
-function js() {{
-
-   // let default_value = '{escaped_default_value}';
-    window.set_cookie = function(key, value) {{
-     //   if (!key || !value || value.length < 20) {{
-     //       console.log("Cannot set cookie, key or value is undefined or null", key, value);
-    //        console.log("default value set to: ", default_value);
-    //        return [default_value];
-    //    }}
-    //    document.cookie = key + '=' + value + '; Path=/; SameSite=Strict';
-    //    return [value];
-    }}
-}}
-'''
-
 # Custom CSS for dark background
 css = """
 body {
@@ -280,6 +265,12 @@ body {
     margin-top: 16px;
     margin-bottom: 3px;
 }
+
+/* Custom button width */
+.license-button-row button {
+    width: 40% !important;
+    margin: 0 auto !important;
+}
 """
 
 
@@ -306,7 +297,7 @@ def get_config(request: Request):
     return config['campaign_details']
 
 
-with gr.Blocks(analytics_enabled=False, js=js, css=css, title="Slidegen AI - Image generator") as iface:
+with gr.Blocks(css=css, title="Slidegen AI - Image generator") as iface:
     gr.Markdown("# Slidegen AI - Image generator")
     gr.Markdown("Generate social media creatives from a few prompts")
 
@@ -318,12 +309,12 @@ with gr.Blocks(analytics_enabled=False, js=js, css=css, title="Slidegen AI - Ima
                 label="Campaign Details",
                 value=default_value
             )
-
+            
+            # This JS approach doesn't work in Gradio 3.x, so we're using a simpler approach
             campaign_details_input.change(
-                fn=None,
+                fn=lambda x: x,  # Just a simple identity function
                 inputs=campaign_details_input,
-                outputs=[],
-                js="(value) => { console.log('Setting cookie:', value); set_cookie('campaign_details', value); }"
+                outputs=campaign_details_input
             )
             
             submit_btn = gr.Button("Generate Image")
@@ -335,23 +326,24 @@ with gr.Blocks(analytics_enabled=False, js=js, css=css, title="Slidegen AI - Ima
             # Center-aligned license key section with bottom margin
             with gr.Group(elem_classes=["license-section"]):
                 license_key_input = gr.Textbox(
-                    placeholder="Enter your license key (email address used for payment)",
+                    placeholder="Enter your license key",
                     label="License Key (optional for first 5 images)"
                 )
                 
                 # Center the button using Row and Columns
                 with gr.Row(elem_classes=["license-button-row"]):
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=3):
                         # Empty column for spacing
                         pass
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=4):
                         validate_btn = gr.Button("Validate")
-                    with gr.Column(scale=1):
+                    with gr.Column(scale=3):
                         # Empty column for spacing
                         pass
                 
                 license_key_status = gr.Markdown("You can generate 5 free images without a license key.", elem_classes=["license-status", "center-text"])
                 gr.Markdown(f"Need more images? [Purchase a license key]({STRIPE_PAYMENT_LINK}) for 50 images.", elem_classes=["center-text", "license-bottom"])
+                gr.Markdown("Each image generation uses 1 credit. Free tier gives 5 credits, license key provides 100 credits.", elem_classes=["center-text", "license-bottom"])
     
     # Set up the validation button click event
     validate_btn.click(
@@ -370,7 +362,7 @@ with gr.Blocks(analytics_enabled=False, js=js, css=css, title="Slidegen AI - Ima
     # Add examples section
     gr.HTML(content_html)
 
-    #iface.load(fn=get_config, outputs=campaign_details_input, js=js)
+    #iface.load(fn=get_config, outputs=campaign_details_input)
 
 
 iface.launch(show_error=True)