add upload file and change folder path

OpenshotService/openshot_video_generator.py

@@ -27,6 +27,8 @@ dir_title = 'title/'
 dir_subtitle = 'subtitle/'
 dir_anchor = 'anchor_raw/'
 tmp_video_dir = 'tmp_video/'
+video_sub_folder = 'ai_anchor_video/'
+
 dir_list = [dir_sound,dir_photo,dir_text,dir_video,dir_title,dir_subtitle,dir_anchor,tmp_video_dir]
 
 def notify_group(msg):
@@ -133,6 +135,7 @@ def file_prepare_v2(name, name_hash,text_content,image_urls):
     make_dir(name_hash)
     img_num = 1
     for imgu in image_urls:
+
         if get_url_type(imgu) =='video/mp4':
             r=requests.get(imgu)
             f=open(dir_photo+name_hash+"/"+str(img_num)+".mp4",'wb')
@@ -390,10 +393,10 @@ def anchor_video_v2(name_hash,name,text_content, image_urls,avatar,client_id):
         f=t.GetFrame(n)
         w.WriteFrame(f)
         
-    notify_group(name+"的影片已經產生完成囉! www.choozmo.com:8168/"+name_hash+".mp4")
+    notify_group(name+"的影片已經產生完成囉! www.choozmo.com:8168/"+video_sub_folder+name_hash+".mp4")
     t.Close()
     w.Close()
-    print("video at : www.choozmo.com:8168/"+name_hash+".mp4")
+    print("video at : www.choozmo.com:8168/"+video_sub_folder+name_hash+".mp4")
 
     #line notifs
 

api/main.py

@@ -1,4 +1,4 @@
-from fastapi import FastAPI,Cookie, Depends, FastAPI, Query, WebSocket, status, WebSocketDisconnect
+from fastapi import FastAPI,Cookie, Depends, FastAPI, Query, WebSocket, status, WebSocketDisconnect,File, UploadFile
 from os import listdir
 from os.path import isfile, isdir, join
 import threading
@@ -27,6 +27,7 @@ from datetime import datetime
 from util.swap_face import swap_face
 from fastapi.staticfiles import StaticFiles
 import shutil
+import io
 #test
 
 app = FastAPI()
@@ -50,7 +51,10 @@ app.mount("/static", StaticFiles(directory="static"), name="static")
 app.mount("/static/img", StaticFiles(directory="static/img"), name="static/img")
 
 tmp_video_dir = '../OpenshotService/tmp_video/'
-video_dest = '/var/www/html/'
+video_sub_folder = 'ai_anchor_video/'
+tmp_img_sub_folder = 'tmp_img/'
+img_upload_folder = '/var/www/html/'+tmp_img_sub_folder
+video_dest = '/var/www/html/'+video_sub_folder
 
 class swap_req(BaseModel):
     imgurl: str
@@ -78,6 +82,17 @@ async def swapFace(req:swap_req):
     #notify_group(result)hi
     return result
 
+@app.post("/uploadfile/")
+async def create_upload_file(file: UploadFile = File(...)):
+    img_name = str(time.time()).replace('.','')
+    try:
+        contents = await file.read()
+        image = Image.open(io.BytesIO(contents))
+        image= image.convert("RGB")
+        image.save(img_upload_folder+img_name+'.jpg')
+    except:
+        return {'msg':'檔案無法使用'}
+    return {"msg": 'www.choozmo.com:8168/'+tmp_img_sub_folder+img_name+'.jpg'}
 
 @app.post("/make_anchor_video_v2")
 async def make_anchor_video_v2(req:request):
@@ -98,7 +113,7 @@ async def make_anchor_video_v2(req:request):
     save_history(req,name_hash)
     x = threading.Thread(target=gen_video, args=(name_hash,req.name, req.text_content, req.image_urls,int(req.avatar),req.client_id))
     x.start()
-    return {"msg":"製作影片需要時間，請您耐心等候  稍後可以在www.choozmo.com:8168/"+name_hash+".mp4 中觀看"} 
+    return {"msg":"製作影片需要時間，請您耐心等候  稍後可以在www.choozmo.com:8168/"+video_sub_folder+name_hash+".mp4 中觀看"} 
 
 @app.get("/history_input")
 async def history_input():
@@ -122,21 +137,19 @@ def save_history(req,name_hash):
     img_urls_seperate_by_dot = img_urls_seperate_by_dot[:-1]
     time_stamp = datetime.fromtimestamp(time.time())
     time_stamp = time_stamp.strftime("%Y-%m-%d %H:%M:%S")
-    pk = log_table.insert({'name':req.name,'text_content':txt_content_seperate_by_dot,'image_urls':img_urls_seperate_by_dot,'link':'www.choozmo.com:8168/'+name_hash+'.mp4','timestamp':time_stamp})
+    pk = log_table.insert({'name':req.name,'text_content':txt_content_seperate_by_dot,'image_urls':img_urls_seperate_by_dot,'link':'www.choozmo.com:8168/'+video_sub_folder+name_hash+'.mp4','timestamp':time_stamp})
     
-
 def get_url_type(url):
     req = urllib.request.Request(url, method='HEAD', headers={'User-Agent': 'Mozilla/5.0'})
     r = urllib.request.urlopen(req)
     contentType = r.getheader('Content-Type')
     return contentType
-    
+
 def gen_video(name_hash,name,text_content, image_urls,avatar,client_id):
     c = rpyc.connect("localhost", 8878)
     c._config['sync_request_timeout'] = None
     remote_svc = c.root
     
-
     my_answer = remote_svc.call_video(name_hash,name,text_content, image_urls,avatar,client_id) # method call
    
     shutil.copy(tmp_video_dir+name_hash+'.mp4',video_dest+name_hash+'.mp4')

api/static/index2.html

@@ -1,75 +1,36 @@
 <!DOCTYPE html>
-<html lang="en" >
+<html lang="en">
+
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>AI ANCHOR GO</title>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
-  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
-    crossorigin="anonymous">
-  <link rel="stylesheet"
-    href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt"
-    crossorigin="anonymous">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet"> 
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css"
+    integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css"
+    integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet"
+    integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
   <link rel="stylesheet" href="static/style.css">
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.min.css">
   <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
-  <style>
-    body {
-      font-family: "Lato", sans-serif;
-    }
-    
-    .sidenav {
-      height: 100%;
-      width: 250px;
-      position: fixed;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      background: linear-gradient(to bottom, #1C7CE0, #150051);
-      overflow-x: hidden;
-      transition: 0.5s;
-      padding-top: 20px;
-    }
-    
-    .sidenav a {
-      padding: 8px 8px 8px 32px;
-      text-decoration: none;
-      font-size: 25px;
-      color: #818181;
-      display: block;
-      transition: 0.3s;
-    }
-    
-    .sidenav a:hover {
-      color: #f1f1f1;
-    }
-    
-    .sidenav .closebtn {
-      position: absolute;
-      top: 0;
-      right: 25px;
-      font-size: 36px;
-      margin-left: 50px;
-    }
-    
-    @media screen and (max-height: 450px) {
-      .sidenav {padding-top: 15px;}
-      .sidenav a {font-size: 18px;}
-    }
-    </style>
+
 </head>
+
 <body>
   <div class="container-fluid">
     <div id="mySidenav" class="sidenav">
       <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
       <h2 class="go_title">AI ANCHOR GO</h2>
       <ul class="nav-list">
-        <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i class="fas fa-book-open me-2"></i>使用說明</li>
-        <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()"><i class="fas fa-history me-2"></i>歷史紀錄</li>
+        <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
+            class="fas fa-book-open me-2"></i>使用說明</li>
+        <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()"><i
+            class="fas fa-history me-2"></i>歷史紀錄</li>
       </ul>
       <p class="right-text text-white d-inline-block">Choozmo All Rights Reserved</p>
     </div>
@@ -77,16 +38,18 @@
     <div class="content ms-auto">
       <form action="/step_questions/submit" method="post" id="msform">
         <div>
-          
-        <a id='linker' style="display: none;">影片連結</a>
+
+          <a id='linker' style="display: none;">影片連結</a>
         </div>
         <!-- fieldsets -->
         <fieldset>
-          <h3 class="fs-subtitle">標題</h3><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題">
-          <input id=title type="text" name='t1' class='title_new' value="" placeholder="1" /> <br/>
+          <h3 class="fs-subtitle">標題</h3><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip"
+            data-bs-placement="right" title="將作為影片的內嵌標題">
+          <input id=title type="text" name='t1' class='title_new' value="" placeholder="1" /> <br />
         </fieldset>
         <fieldset>
-          <h3  class="fs-subtitle">選擇人物</h3><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者">
+          <h3 class="fs-subtitle">選擇人物</h3><img class="ms-1" src="static/img/question.png" alt=""
+            data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者">
           <select id="avatar" class='avatar'>
             <option value="6">Angus</option>
             <option value="7">Peggy</option>
@@ -134,31 +97,32 @@
         </fieldset>
         <fieldset>
           <h3 class="fs-subtitle">台詞</h3>
-          <input type="text" name='t1' class='txtsrc1' value="" placeholder="1" /> <br/>
-          <input type="text" name='t2' class='txtsrc2' value="" placeholder="2" /><br/>
-          <input type="text" name='t3' class='txtsrc3' value="" placeholder="3" /><br/>
-          <input type="text" name='t4'  class='txtsrc4' value="" placeholder="4" /><br/>
-          <input type="text" name='t5' class='txtsrc5' value="" placeholder="5" /><br/>
-          <input type="text" name='t6' class='txtsrc6' value="" placeholder="6" /><br/>
-          <input type="text" name='t7' class='txtsrc7' value="" placeholder="7" /><br/>
-          <input type="text" name='t8' class='txtsrc8' value="" placeholder="8" /><br/>
-          <input type="text" name='t9' class='txtsrc9' value="" placeholder="9" /><br/>
-          <input type="text" name='t10' class='txtsrc10' value="" placeholder="10" /><br/>
+          <input type="text" name='t1' class='txtsrc1' value="" placeholder="1" /><br />
+          <input type="text" name='t2' class='txtsrc2' value="" placeholder="2" /><br />
+          <input type="text" name='t3' class='txtsrc3' value="" placeholder="3" /><br />
+          <input type="text" name='t4' class='txtsrc4' value="" placeholder="4" /><br />
+          <input type="text" name='t5' class='txtsrc5' value="" placeholder="5" /><br />
+          <input type="text" name='t6' class='txtsrc6' value="" placeholder="6" /><br />
+          <input type="text" name='t7' class='txtsrc7' value="" placeholder="7" /><br />
+          <input type="text" name='t8' class='txtsrc8' value="" placeholder="8" /><br />
+          <input type="text" name='t9' class='txtsrc9' value="" placeholder="9" /><br />
+          <input type="text" name='t10' class='txtsrc10' value="" placeholder="10" /><br />
         </fieldset>
-        <fieldset>
-          <h3 class="fs-subtitle">影像連結</h3><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式">
-          <input type="text" name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><br/>
-          <input type="text" name='m2' class='imgsrc imgsrc2' value="" placeholder="2" /><br/>
-          <input type="text" name='m3' class='imgsrc imgsrc3' value="" placeholder="3" /><br/>
-          <input type="text" name='m4' class='imgsrc imgsrc4' value="" placeholder="4" /><br/>
-          <input type="text" name='m5' class='imgsrc imgsrc5' value="" placeholder="5" /><br/>
-          <input type="text" name='m6' class='imgsrc imgsrc6' value="" placeholder="6" /><br/>
-          <input type="text" name='m7' class='imgsrc imgsrc7' value="" placeholder="7" /><br/>
-          <input type="text" name='m8' class='imgsrc imgsrc8' value="" placeholder="8" /><br/>
-          <input type="text" name='m9' class='imgsrc imgsrc9' value="" placeholder="9" /><br/>
-          <input type="text" name='m10' class='imgsrc imgsrc10' value="" placeholder="10" /><br/>
+        <fieldset id='imgSrc'>
+          <h3 class="fs-subtitle">影像連結</h3><img class="ms-1" src="static/img/question.png" alt=""
+            data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"><br/>
+          <input type="text" name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m2' class='imgsrc imgsrc2' value="" placeholder="2" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m3' class='imgsrc imgsrc3' value="" placeholder="3" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m4' class='imgsrc imgsrc4' value="" placeholder="4" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m5' class='imgsrc imgsrc5' value="" placeholder="5" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m6' class='imgsrc imgsrc6' value="" placeholder="6" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m7' class='imgsrc imgsrc7' value="" placeholder="7" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m8' class='imgsrc imgsrc8' value="" placeholder="8" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m9' class='imgsrc imgsrc9' value="" placeholder="9" /><input type="file" class="img_uploader img_up"> <br />
+          <input type="text" name='m10' class='imgsrc imgsrc10' value="" placeholder="10" /><input type="file" class="img_uploader img_up"> <br />
           <input id="checker" type="button" name="next" class="next action-button" value="送出" />
-          
+
           <h3 style="display: none;" class="fs-subtitle">處理進度</h3>
           <div style="display: none;" id="myProgress">
             <div style="display: none;" id="myBar">0%</div>
@@ -166,7 +130,7 @@
         </fieldset>
       </form>
     </div>
-        
+
     <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
       <div class="modal-dialog">
         <div class="modal-content">
@@ -175,47 +139,52 @@
             <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
           </div>
           <div class="modal-body">
-              <div class="modal-terms">
-                  <ol class="ps-0">
-                      <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
-                      <li>2. 影像連結檔案格式支援：<stong class="strong">.png, jpg, .mp4</stong></li>
-                      <li>3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
-                  </ol>
-              </div>
+            <div class="modal-terms">
+              <ol class="ps-0">
+                <li>1. 一句台詞請對應提供一個影像連結做為搭配</li>
+                <li>2. 影像連結檔案格式支援：<stong class="strong">.png, jpg, .mp4</stong>
+                </li>
+                <li>3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看</li>
+              </ol>
+            </div>
           </div>
         </div>
       </div>
-  </div> 
-  <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
-    <div class="modal-dialog modal-dialog-scrollable">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h5 class="modal-title" id="staticBackdropLabel">歷史紀錄</h5>
-          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-        </div>
-        <div class="modal-body">
+    </div>
+    <div class="modal" tabindex="-1" id="history" aria-labelledby="history" aria-hidden="true">
+      <div class="modal-dialog modal-dialog-scrollable">
+        <div class="modal-content">
+          <div class="modal-header">
+            <h5 class="modal-title" id="staticBackdropLabel">歷史紀錄</h5>
+            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+          </div>
+          <div class="modal-body">
             <div class="modal-terms">
               <div class="loader"><img src="static/img/bx_loader.gif" alt=""></div>
               <ol class="ps-0 historyList">
               </ol>
             </div>
+          </div>
         </div>
       </div>
     </div>
-</div>
   </div>
-  
+
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
   <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
-  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script> 
+  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
+    integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
+    crossorigin="anonymous"></script>
+  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js"
+    integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT"
+    crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
   <script src="static/script_msg.js"></script>
 
   <body>
 
-</div>
+    </div>
 
-</body>
-</html>
+  </body>
 
+</html>

api/static/script_msg.js

@@ -10,170 +10,194 @@ var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
 
 
 
-(function(){
-  $('.imgfr').hover(function(){
+(function () {
+  $('.imgfr').hover(function () {
     $(this).next().css('display', 'block');
-  }, function(){
+  }, function () {
     $(this).next().css('display', 'none');
   })
 }());
 
+$('input[type=file]').on('change', prepareUpload);
 
+// Grab the files and set them to our variable
+function prepareUpload(event) {
+  files = event.target.files;
+  var data = new FormData();
+  //data.append('file', $('.img_up1').prop('files')[0]);
+  data.append('file', files[0]);
+  // append other variables to data if you want: data.append('field_name_x', field_value_x);
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'http://127.0.0.1:8000/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value =jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+    },
+    error: function (error) {
+      alert('圖片錯誤');
+    }
+  });
+}
 const button = document.querySelector('.next');
 
-$(".next").click(function(){
+$(".next").click(function () {
   button.setAttribute('disabled', '');
-  setTimeout(function(){
+  setTimeout(function () {
     button.removeAttribute('disabled')
   }, 4000);
   avatar = $('.avatar').val();
   name_title = $('.title_new').val();
-  txtARR=[];
-  imgARR=[];
+  txtARR = [];
+  imgARR = [];
   var step;
-	for (step = 1; step <= 10; step++) {
-	  if($(".txtsrc"+step).val()!=""){
-		  txtARR.push($(".txtsrc"+step).val())
-	  }
-	}
-	var step2;
-	for (step2 = 1; step2 <= 10; step2++) {
-	  if($(".imgsrc"+step2).val()!=""){
-		  imgARR.push($(".imgsrc"+step2).val())
-	  }
-	}	
-	dataOBJ = {"name":name_title,"text_content":txtARR,"image_urls":imgARR,"avatar":avatar,"client_id":client_id}
-	objstr = JSON.stringify(dataOBJ);
-	console.log(dataOBJ)
+  for (step = 1; step <= 10; step++) {
+    if ($(".txtsrc" + step).val() != "") {
+      txtARR.push($(".txtsrc" + step).val())
+    }
+  }
+  var step2;
+  for (step2 = 1; step2 <= 10; step2++) {
+    if ($(".imgsrc" + step2).val() != "") {
+      imgARR.push($(".imgsrc" + step2).val())
+    }
+  }
+  dataOBJ = { "name": name_title, "text_content": txtARR, "image_urls": imgARR, "avatar": avatar, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
   //alert('資料已送出! 請耐心等候')
   $.ajax({
-	url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
-	//url: 'http://www.choozmo.com:8888/qqreq',
-	dataType : 'json', // 預期從server接收的資料型態
-  contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
-	type: 'post',
-	data: objstr,
-	success: function(suc_data) {
-    Swal.fire({
-      title: `${suc_data.msg}`,
-      confirmButtonColor: '#3085d6',
-    }); 
-	  },
-	//data:JSON.stringify({n1:"12",n2:"22"}),
-	error: function (error) {
-	  console.error(error)
-	}
-});
+    url: 'http://www.choozmo.com:8888/make_anchor_video_v2',
+    //url: 'http://www.choozmo.com:8888/qqreq',
+    dataType: 'json', // 預期從server接收的資料型態
+    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function (suc_data) {
+      Swal.fire({
+        title: `${suc_data.msg}`,
+        confirmButtonColor: '#3085d6',
+      });
+    },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
 
 });
 
-$(".gen_avatar").click(function(){
+$(".gen_avatar").click(function () {
 
-	dataOBJ = {"imgurl":$('.img_src').val()}
-	objstr = JSON.stringify(dataOBJ);
-	console.log(dataOBJ)
+  dataOBJ = { "imgurl": $('.img_src').val() }
+  objstr = JSON.stringify(dataOBJ);
+  console.log(dataOBJ)
   //alert('資料已送出! 請耐心等候')
   $.ajax({
-	url: 'http://www.choozmo.com:8888/swapFace',
-	dataType : 'json', // 預期從server接收的資料型態
-  contentType : 'application/json; charset=utf-8', // 要送到server的資料型態
-	type: 'post',
-	data: objstr,
-	success: function(suc_data) {
-    alert(suc_data.msg)
-  },
-	//data:JSON.stringify({n1:"12",n2:"22"}),
-	error: function (error) {
-	  console.error(error)
-	}
-});
+    url: 'http://www.choozmo.com:8888/swapFace',
+    dataType: 'json', // 預期從server接收的資料型態
+    contentType: 'application/json; charset=utf-8', // 要送到server的資料型態
+    type: 'post',
+    data: objstr,
+    success: function (suc_data) {
+      alert(suc_data.msg)
+    },
+    //data:JSON.stringify({n1:"12",n2:"22"}),
+    error: function (error) {
+      console.error(error)
+    }
+  });
 
 });
 
 
 var loaded_data = ''
 function openNav() {
-	document.getElementById("mySidenav").style.width = "250px";
+  document.getElementById("mySidenav").style.width = "250px";
   document.querySelector('.loader').style.display = "block";
-    $.get("http://www.choozmo.com:8888/history_input", function(data, status){
-        console.log(data)
-        loaded_data = data
-         for (var obj of data) {
-            var historyList = document.querySelector('.historyList');
-            var list = document.createElement('li')
-            var message = document.createElement('a')
-            list.classList.add("historyList-item");
-            message.classList.add("historyList-link");
-            var content = document.createTextNode(obj.name)
-            message.id = obj.id
-            message.setAttribute('href', "#")
-            message.setAttribute('onclick', "load_data()")
-            message.appendChild(content)
-            list.appendChild(message);
-            historyList.appendChild(list);
-        } 
-        document.querySelector('.loader').style.display = "none";  
-        });
+  $.get("http://www.choozmo.com:8888/history_input", function (data, status) {
+    console.log(data)
+    loaded_data = data
+    for (var obj of data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li')
+      var message = document.createElement('a')
+      list.classList.add("historyList-item");
+      message.classList.add("historyList-link");
+      var content = document.createTextNode(obj.name)
+      message.id = obj.id
+      message.setAttribute('href', "#")
+      message.setAttribute('onclick', "load_data()")
+      message.appendChild(content)
+      list.appendChild(message);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  });
 }
 var myModal = new bootstrap.Modal(document.getElementById('history'), {
   keyboard: false
 })
-    function closeNav() {
-      document.getElementById("mySidenav").style.width = "250px";
-    }
-    function load_data(){
-      var title = document.getElementById("title");
-      var linker = document.getElementById("linker");
-      
-      myModal.hide()
-      tid = event.srcElement.id
-      console.log(tid);
-      linker.setAttribute('href', loaded_data.find(item => item.id == tid).link)
-      
-      $("#linker").html(loaded_data.find(item => item.id == tid).link)
-      $("#linker").show()
-      
-      $(".title_new").val(loaded_data.find(item => item.id == tid).name)
-      var step;
-      for (step = 1; step <= 10; step++) {
-        $(".txtsrc"+step).val(loaded_data.find(item => item.id == tid).text_content[step-1]) 
-      }
-      var step2;
-      for (step2 = 1; step2 <= 10; step2++) {
-        $(".imgsrc"+step2).val(loaded_data.find(item => item.id == tid).image_urls[step2-1]) 
-      }
-      
-    }
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+function load_data() {
+  var title = document.getElementById("title");
+  var linker = document.getElementById("linker");
+
+  myModal.hide()
+  tid = event.srcElement.id
+  console.log(tid);
+  linker.setAttribute('href', loaded_data.find(item => item.id == tid).link)
+
+  $("#linker").html(loaded_data.find(item => item.id == tid).link)
+  $("#linker").show()
+
+  $(".title_new").val(loaded_data.find(item => item.id == tid).name)
+  var step;
+  for (step = 1; step <= 10; step++) {
+    $(".txtsrc" + step).val(loaded_data.find(item => item.id == tid).text_content[step - 1])
+  }
+  var step2;
+  for (step2 = 1; step2 <= 10; step2++) {
+    $(".imgsrc" + step2).val(loaded_data.find(item => item.id == tid).image_urls[step2 - 1])
+  }
+
+}
 
 
-            var err = [];
-            function listenToimg() {
-            }
-            
-            validate();
-            function validate(){
-              let imgsrc = document.querySelectorAll('.imgsrc');
-              imgsrc = [...imgsrc];
-              for(let i = 0; i < 10; i++){
-                imgsrc[i].addEventListener('blur', function(){
-                  let srcArray = $(this).val().split('.');
-                  console.log(srcArray);
-                  if(srcArray.includes('png') || srcArray.includes('jpg')){
-                    $(this).removeClass('error');
-                    $(this).next().remove('p');
-                    err.pop();
-                  }else if(srcArray.length <= 1){
-                    $(this).removeClass('error');
-                    $(this).next().remove('p');
-                    err.pop();
-                  }else {
-                    $(this).addClass('error');
-                    if( this.nextSibling.nodeName !== 'P') {
-                      $(this).after('<p class="error-text">未支援該格式</p>');
-                    }
-                    err.push('svg');
-                    console.log(err);
-                  }
-                });
-              }
-            }
+var err = [];
+function listenToimg() {
+}
+
+validate();
+function validate() {
+  let imgsrc = document.querySelectorAll('.imgsrc');
+  imgsrc = [...imgsrc];
+  for (let i = 0; i < 10; i++) {
+    imgsrc[i].addEventListener('blur', function () {
+      let srcArray = $(this).val().split('.');
+      console.log(srcArray);
+      if (srcArray.includes('png') || srcArray.includes('jpg')) {
+        $(this).removeClass('error');
+        $(this).next().remove('p');
+        err.pop();
+      } else if (srcArray.length <= 1) {
+        $(this).removeClass('error');
+        $(this).next().remove('p');
+        err.pop();
+      } else {
+        $(this).addClass('error');
+        if (this.nextSibling.nodeName !== 'P') {
+          $(this).after('<p class="error-text">未支援該格式</p>');
+        }
+        err.push('svg');
+        console.log(err);
+      }
+    });
+  }
+}

api/static/style.css

@@ -133,7 +133,53 @@ body {
 	position: relative;
 
 }
+body {
+	font-family: "Lato", sans-serif;
+  }
+
+  .sidenav {
+	height: 100%;
+	width: 250px;
+	position: fixed;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	background: linear-gradient(to bottom, #1C7CE0, #150051);
+	overflow-x: hidden;
+	transition: 0.5s;
+	padding-top: 20px;
+  }
+
+  .sidenav a {
+	padding: 8px 8px 8px 32px;
+	text-decoration: none;
+	font-size: 25px;
+	color: #818181;
+	display: block;
+	transition: 0.3s;
+  }
 
+  .sidenav a:hover {
+	color: #f1f1f1;
+  }
+
+  .sidenav .closebtn {
+	position: absolute;
+	top: 0;
+	right: 25px;
+	font-size: 36px;
+	margin-left: 50px;
+  }
+
+  @media screen and (max-height: 450px) {
+	.sidenav {
+	  padding-top: 15px;
+	}
+
+	.sidenav a {
+	  font-size: 18px;
+	}
+  }
 .nav-list-item::after {
 	content: " ";
 	position: absolute;
@@ -245,6 +291,14 @@ body {
 	margin: 10px auto;
 	display: block;
 }
+.img_uploader{
+	display:inline-block;width:30%
+}
+#imgSrc input[type="text"]
+{
+	display: inline-block;
+	width:70%
+}
 #msform .action-button:hover, #msform .action-button:focus {
 	box-shadow: 0 0 0 2px white, 0 0 0 3px #1C7CE0;
 }