add progress bar

main.py

@@ -21,6 +21,7 @@ import hashlib
 import re
 import urllib.request
 from fastapi.responses import FileResponse
+from websocket import create_connection
 #service nginx restart
 #uvicorn main:app --host="0.0.0.0" --reload --port 8888
 
@@ -82,17 +83,12 @@ async def make_anchor_video_v2(req:request2):
     return {"msg":"製作影片需要時間，請您耐心等候 稍後可以在www.choozmo.com:8168/"+req.name+".mp4 中觀看"} 
 
 
-@app.get("/progress")
-async def get():
-    return FileResponse('progress.html')
-
-
-@app.websocket("/ws")
+@app.websocket("/progress")
 async def websocket_endpoint(websocket: WebSocket):
     await websocket.accept()
     while True:
         data = await websocket.receive_text()
-        await websocket.send_text(f"Message text was: {data}")
+        await websocket.send_text({data})
 
 
 def notify_group(msg):
@@ -387,15 +383,25 @@ def generate_subtitle_image(name_hash,text_content):
 
 
 def anchor_video_v2(name,text_content, image_urls):
+    ws = create_connection("ws://www.choozmo.com/progress")
+    progress = 0
     m = hashlib.md5()
     m.update(name.encode("utf-8"))
     name_hash = m.hexdigest()
     
     print('sub image made')
     file_prepare_v2(name, name_hash, text_content,image_urls)
+    progress = 10
+    ws.send(progress)
     sub_list=generate_subtitle_image(name_hash,text_content)
+    progress = 20
+    ws.send(progress)
+    
+    progress_per_video = int(40/len(text_content))
     for fname in range(len(text_content)):
         call_achor_video_v2(name_hash+"/"+str(fname))
+        progress += progress_per_video
+        ws.send(progress)
         print('step finish')
     print('called............................................')
 
@@ -407,7 +413,7 @@ def anchor_video_v2(name,text_content, image_urls):
     t.Open()
 
     main_timer = 0
-
+    
     LOGO_OP = openshot.FFmpegReader(dir_video+"LOGO_OP.mp4")
     LOGO_OP.Open()         # Open the reader
     LOGO_OP_clip = video_photo_clip(vid=LOGO_OP,layer=4,position=0,end=LOGO_OP.info.duration
@@ -421,6 +427,7 @@ def anchor_video_v2(name,text_content, image_urls):
     head_duration = LOGO_OP.info.duration
     bg_head.Close()
     LOGO_OP.Close()
+    progress += 10
     
 
     
@@ -479,7 +486,9 @@ def anchor_video_v2(name,text_content, image_urls):
 
         main_timer += clip_duration
         idx+=1
-  
+
+    progress+=10
+    ws.send(progress)
     
     LOGO_ED = openshot.FFmpegReader(dir_video+"LOGO_ED.avi")
     LOGO_ED.Open()
@@ -488,7 +497,7 @@ def anchor_video_v2(name,text_content, image_urls):
     t.AddClip(LOGO_ED_clip)
     ED_duration = LOGO_ED.info.duration
     LOGO_ED.Close()
-
+    
 
     bg = openshot.FFmpegReader(dir_video+"bg.mp4")
     bg.Open()
@@ -533,6 +542,8 @@ def anchor_video_v2(name,text_content, image_urls):
     w.Close()
     print("Raw Video done")
     print("video at : www.choozmo.com:8168/"+name_hash+".mp4")
+    progress = 100
+    ws.send(progress)
     #line notifs
     notify_group(name+"的影片已經產生完成囉! www.choozmo.com:8168/"+name_hash+".mp4")
 

progress.html

@@ -51,28 +51,24 @@ function move() {
 </script>
 
 
-<h1>WebSocket Chat</h1>
-<form action="" onsubmit="sendMessage(event)">
-    <input type="text" id="messageText" autocomplete="off"/>
-    <button>Send</button>
-</form>
-<ul id='messages'>
-</ul>
+
 <script>
-    var ws = new WebSocket("ws://www.choozmo.com:8888/ws");
+    var ws = new WebSocket("ws://www.choozmo.com:8888/progress");
     ws.onmessage = function(event) {
+
+    var elem = document.getElementById("myBar");
+  
+        elem.style.width = event.data + "%";
+        elem.innerHTML = event.data  + "%";
+
+
         var messages = document.getElementById('messages')
         var message = document.createElement('li')
         var content = document.createTextNode(event.data)
         message.appendChild(content)
         messages.appendChild(message)
     };
-    function sendMessage(event) {
-        var input = document.getElementById("messageText")
-        ws.send(input.value)
-        input.value = ''
-        event.preventDefault()
-    }
+  
 </script>
 
 </body>