css

README.md

@@ -4,9 +4,10 @@ emoji: 📚
 colorFrom: red
 colorTo: blue
 sdk: gradio
-sdk_version: 4.24.0
+sdk_version: 4.8.0
 app_file: app.py
 pinned: false
 ---
 
+
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1153,70 +1153,181 @@ def generate_key_moments(formatted_simple_transcript, formatted_transcript):
     return key_moments
 
 def get_key_moments_html(key_moments):
-    """
-    Generates HTML for key moments with a left-side gallery and right-side text.
-    """
     css = """
     <style>
-    /* Existing CSS from your sample ... */
-
-    .gallery-container {
+    #gallery-main {
         display: flex;
         align-items: center;
         margin-bottom: 20px;
     }
-    .image-container {
+
+    #gallery {
         position: relative;
-        max-height: 350px;
+        width: 50%;
         flex: 1;
     }
-    .image-container img {
-        max-height: 350px;
-        display: block;
-        margin: 0 auto; /* Center the image */
-    }
-    .text-content {
+
+    #text-content {
         flex: 2;
         margin-left: 20px;
     }
-    .arrow {
-        cursor: pointer;
-        user-select: none;
+
+
+    #gallery #gallery-container{
+        position: relative;
+        width: 100%;
+        height: 0px;
+        padding-bottom: 56.7%; /* 16/9 ratio */
+        background-color: blue;
+    }
+    #gallery #gallery-container #gallery-content{
+        position: absolute;
+        top: 0px;
+        right: 0px;
+        bottom: 0px;
+        left: 0px;
+        height: 100%;
+        display: flex;
+        scroll-snap-type: x mandatory;
+        overflow-x: scroll;
+        scroll-behavior: smooth;
+    }
+    #gallery #gallery-container #gallery-content .gallery__item{
+        width: 100%;
+        height: 100%;
+        flex-shrink: 0;
+        scroll-snap-align: start;
+        scroll-snap-stop: always;
+        position: relative;
+    }
+    #gallery #gallery-container #gallery-content .gallery__item img{
+        display: block;
+        width: 100%;
+        height: 100%;
+        object-fit: contain;
+        background-color: white;
+    }
+
+    .click-zone{
+        position: absolute;
+        width: 20%;
+        height: 100%;
+        z-index: 3;
+    }
+    .click-zone.click-zone-prev{
+        left: 0px;
+    }
+    .click-zone.click-zone-next{
+        right: 0px;
+    }
+    #gallery:not(:hover) .arrow{
+        opacity: 0.8;
+    }
+    .arrow{
+        text-align: center;
+        z-index: 3;
         position: absolute;
+        display: block;
+        width: 25px;
+        height: 25px;
+        line-height: 25px;
+        background-color: black;
+        border-radius: 50%;
+        text-decoration: none;
+        color: black;
+        opacity: 0.8; 
+        transition: opacity 200ms ease;
+    }
+    .arrow:hover{
+        opacity: 1;
+    }
+    .arrow span{
+        position: relative;
+        top: 2px;
+    }
+    .arrow.arrow-prev{
         top: 50%;
-        transform: translateY(-50%);
-        background-color: rgba(255, 255, 255, 0.8);
-        border: none;
-        padding: 10px;
-        font-size: 24px;
-        z-index: 10;
+        left: 5px;
+    }
+    .arrow.arrow-next{
+        top: 50%;
+        right: 5px;
+    }
+    .arrow.arrow-disabled{
+        opacity:0.8;
+    }
+
+    #text-content {
+        padding: 0px 36px;
+    }
+    #text-content p {
+        margin-top: 10px;
+    }
+
+    body{
+        font-family: sans-serif;
+        margin: 0px;
+        padding: 0px;
+    }
+    main{
+        padding: 0px;
+        margin: 0px;
+        max-width: 900px;
+        margin: auto;
+    }
+    .hidden{
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
     }
-    .arrow-prev { left: 0; }
-    .arrow-next { right: 0; }
     </style>
     """
 
-    key_moments_html = "" + css
+    key_moments_html = css
 
     for i, moment in enumerate(key_moments):
-        start_time = moment['start']
-        end_time = moment['end']
-        text = moment['text']
-        transcript = moment['transcript']
         images = moment['images']
-        image_elements = "".join([f'<img src="{img}" alt="Image {idx}" class="slide-image slide-image-{i}-{idx}" style="display: {"" if idx == 0 else "none"};" />' for idx, img in enumerate(images)])
+        image_elements = ""
+        
+        for j, image in enumerate(images):
+            current_id = f"img_{i}_{j}"
+            prev_id = f"img_{i}_{j-1}" if j-1 >= 0 else f"img_{i}_{len(images)-1}"
+            next_id = f"img_{i}_{j+1}" if j+1 < len(images) else f"img_{i}_0"
+
+            image_elements += f"""
+                <div id="{current_id}" class="gallery__item">
+                    <a href="#{prev_id}" class="click-zone click-zone-prev">
+                        <div class="arrow arrow-disabled arrow-prev"> < </div>
+                    </a> 
+                    <a href="#{next_id}" class="click-zone click-zone-next">
+                        <div class="arrow arrow-next"> > </div>
+                    </a>
+                    <img src="{image}">
+                </div>
+            """
+
+        gallery_content = f"""
+            <div id="gallery-content">
+                {image_elements}
+            </div>
+        """
 
         key_moments_html += f"""
-        <div class="gallery-container">
-            <div class="image-container">
-                <button class="arrow arrow-prev" onclick="changeImage(-1, {len(images)}, {i})">&#10094;</button>
-                {image_elements}
-                <button class="arrow arrow-next" onclick="changeImage(1, {len(images)}, {i})">&#10095;</button>
+        <div class="gallery-container" id="gallery-main">
+            <div id="gallery"><!-- gallery start -->
+                <div id="gallery-container">
+                    {gallery_content}
+                </div>
             </div>
-            <div class="text-content">
-                <h3>{start_time} - {end_time}</h3>
-                <p><strong>摘要:</strong> {text}</p>
-                <p><strong>逐字稿:</strong> {transcript}</p>
+            <div id="text-content">
+                <h3>{moment['start']} - {moment['end']}</h3>
+                <p><strong>摘要: {moment['text']} </strong></p>
+                <p>內容: {moment['transcript']}</p>
             </div>
         </div>
         """