update example

app.py

@@ -8,6 +8,7 @@ import io
 import hashlib
 import os
 import time
+import shutil
 css="""
 #col-left {
     margin: 0 auto;
@@ -17,10 +18,27 @@ css="""
     margin: 0 auto;
     max-width: 640px;
 }
+.grid-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap:10px
+}
+
+.image {
+  width: 128px; 
+  height: 128px; 
+  object-fit: cover; 
+}
+
+.text {
+  font-size: 16px;
+}
 """
 
+
 output_dir = "outputs"
-passed_time =  60 #* 60
+passed_time =  60 * 10
 def load_text(text_path: str) -> str:
     with open(text_path, 'r', encoding='utf-8') as f:
         text = f.read()
@@ -28,17 +46,19 @@ def load_text(text_path: str) -> str:
     return text
 
 def clear_old_files(dir,passed_time):
-    files = os.listdir(dir)
-    current_time = time.time()
-    for file in files:
-         file_path = os.path.join(dir,file)
-         #print(os.stat(file_path))
-         ctime = os.stat(file_path).st_ctime
-         diff = current_time - ctime
-         print(f"ctime={ctime},current_time={current_time},passed_time={passed_time},diff={diff}")
-         if diff > passed_time:
-              os.remove(file_path)
-              print(f"file removed {file_path}")
+    try:
+        files = os.listdir(dir)
+        current_time = time.time()
+        for file in files:
+            file_path = os.path.join(dir,file)
+            
+            ctime = os.stat(file_path).st_ctime
+            diff = current_time - ctime
+            #print(f"ctime={ctime},current_time={current_time},passed_time={passed_time},diff={diff}")
+            if diff > passed_time:
+                os.remove(file_path)
+    except:
+            print("maybe still gallery using error")
 
 
 def process_images(normal_image,mouth_open_image,eye_close_image,duration=100,pattern = "nnnmmmnenmmmnnnmmmnnnmmmnnnmmm",looping = True):
@@ -74,11 +94,6 @@ def process_images(normal_image,mouth_open_image,eye_close_image,duration=100,pa
         else:
             frames.append(normal_image)
 
-      #img = webp.load_image('00044063.webp', 'RGB')
-    #imgs = webp.load_images('00044063.webp', 'RGB',fps=10)#some how only fps10 load correctly?
-    #print(len(imgs))   
-
-    #print(len(frames))
     loop = 0  if looping else 1  #MUST BE ZERO,NOT TRUE
     output_path = "tmp.webp"
     output_buffer = io.BytesIO()
@@ -106,10 +121,11 @@ def show_example(value1,value2,valu3,id):
      return f"webpes/{id}.webp"
 
 #css=css,
-demo_blocks = gr.Blocks(css=css, elem_id="demo-container")
-with demo_blocks as demo:
+
+with gr.Blocks(css=css, elem_id="demo-container") as demo:
     with gr.Column():
         gr.HTML(load_text("demo_header.html"))
+        gr.HTML(load_text("demo_tools.html"))
     with gr.Row():
                 with gr.Column():
                     image_normal = gr.Image(sources=['upload','clipboard'],  elem_id="image_normal", type="pil", label="Normal Image",height=400, value=None)
@@ -131,26 +147,21 @@ with demo_blocks as demo:
     btn.click(fn=process_images, inputs=[image_normal, image_mouth,image_eyes,animation_time,timing_seat,looping], outputs =image_out, api_name='infer')
     gr.Examples(
                examples=[
-                    ["imgs/00003245_normal.jpg","imgs/00003245_mouth.jpg","imgs/00003245_eyes.jpg","00003245"],
-                    ["imgs/00207245_normal.png","imgs/00207245_mouth.png","imgs/00207245_eyes.png","00207245"],
-                    ["imgs/00350245_normal.jpg","imgs/00350245_mouth.jpg","imgs/00350245_eyes.jpg","00350245"],
-                    ["imgs/00538245_normal.jpg","imgs/00538245_mouth.jpg","imgs/00538245_eyes.jpg","00538245"],
-                    ["imgs/00828003_00.jpg","imgs/00828003_09.jpg","imgs/00828003_99.jpg","00828003"],
-                    ["imgs/00825000_00.jpg","imgs/00825000_09.jpg","imgs/00825000_99.jpg","00825000"],
-                    ["imgs/00824008_00.jpg","imgs/00824008_09.jpg","imgs/00824008_99.jpg","00824008"],
-                    ["imgs/prompt01_normal.jpg","imgs/prompt01_mouth.jpg","imgs/prompt01_eyes.jpg","prompt01"],
+                    ["examples/00003245_normal.jpg","examples/00003245_mouth.jpg","examples/00003245_eyes.jpg","examples/00003245.webp"],
+                    ["examples/00207245_normal.png","examples/00207245_mouth.png","examples/00207245_eyes.png","examples/00207245.webp"],
+                    ["examples/00350245_normal.jpg","examples/00350245_mouth.jpg","examples/00350245_eyes.jpg","examples/00350245.webp"],
+                    ["examples/00538245_normal.jpg","examples/00538245_mouth.jpg","examples/00538245_eyes.jpg","examples/00538245.webp"],
+                    ["examples/00828003_00.jpg","examples/00828003_09.jpg","examples/00828003_99.jpg","examples/00828003.webp"],
+                    ["examples/00825000_00.jpg","examples/00825000_09.jpg","examples/00825000_99.jpg","examples/00825000.webp"],
+                    ["examples/00824008_00.jpg","examples/00824008_09.jpg","examples/00824008_99.jpg","examples/00824008.webp"],
+                    ["examples/prompt01_normal.jpg","examples/prompt01_mouth.jpg","examples/prompt01_eyes.jpg","examples/prompt01.webp"],
                     ],
-                fn=show_example,
-                inputs=[image_normal,image_mouth,image_eyes,id_input],outputs=[image_out],
-                cache_examples=True,
+                inputs=[image_normal,image_mouth,image_eyes,image_out],
+                
     )
     gr.HTML(
-        """
-            <div style="text-align: center;">
-                <p>Test <a href="http://google.com" style="text-decoration: underline;" target="_blank">Google</a> - Gradio Demo by 🤗 Hugging Face
-                </p>
-            </div>
-        """
+       gr.HTML(load_text("demo_footer.html"))
     )
 
-demo_blocks.queue(max_size=25).launch()#share=True
+    if __name__ == "__main__":
+        demo.launch()

demo_footer.html

@@ -0,0 +1,3 @@
+<div>
+    <P> Images are generated with <a href="https://huggingface.co/black-forest-labs/FLUX.1-schnell">FLUX.1-schnell</a> and licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0">the Apache 2.0 License</a>
+</div>

demo_header.html

@@ -1,2 +1,18 @@
-<h1>WebP 3-Frame TalkingAnimation</h1>
-<p>This is Character Face part of AI Diagram Chat with Voice/Face Character</p>
+<div style="text-align: center;">
+    <h1>
+        WebP 3-Frame TalkingAnimation
+    </h1>
+    <div class="grid-container">
+        <img src="https://akjava.github.io/AIDiagramChatWithVoice-FaceCharacter/webp/128/00346245_09_00001200.webp" alt="Flux.1-schnell-WebP3Frame-TalkingAnimation" class="image">
+        <p class="text">
+        Create animation from 3 frame images<br>
+        Main create tool is not relaeased yet(mediapipe68-based and img2img-based)<br>
+        however you can create from prompt like eyes closed and open mouth.one of example is made by this way<br>
+        created webp can be resize and convert with tool.
+        </p>
+    </div>
+</div>
+
+
+
+<h1></h1>

demo_tools.html

@@ -0,0 +1,10 @@
+<div style="text-align: center;">
+    <p><a href="https://huggingface.co/spaces/Akjava/AIDiagramChatWithVoice-FaceCharacter">AI Diagram Chat with Voice/Face Character Making Tools</a></p>
+    <p><a href="https://huggingface.co/spaces/Akjava/WebPTalkHead">[WebP-3F-TH]</a>
+        <a href="https://huggingface.co/spaces/Akjava/flux1-schnell-img2img">[Flux1-Img2Img(GPU)]</a>  
+        <a href="https://huggingface.co/spaces/Akjava/flux1-schnell-mask-inpaint">[Flux1-Inpaint(GPU)]</a> 
+        <a href="https://huggingface.co/spaces/Akjava/OpenCVInpaintCPU">[OpenCV-Inapint]</a>
+        <a href="https://huggingface.co/spaces/Akjava/Simple-Whitebalance-Image">[Whitebalance]</a>
+        <a href="https://huggingface.co/spaces/Akjava/Simple-Mask-Paste-Image">[Paste Image]</a>
+        <a href=" https://huggingface.co/spaces/Akjava/WebP-Resize-Convert">[WebP Resize Convert]</a></p> 
+</div>