modify view

api/gSlide.py

@@ -75,5 +75,5 @@ def parse_slide_url(slide_url,eng):
     slide_content = { "name": presentation['title'], "text_content": notes_list, "image_urls": img_list, "avatar": "7", "client_id": calendar.timegm(time.gmtime()) }
     if eng:
         slide_content['sub_titles'] = sub_title_list
-    return slide_content
+    return slide_content['name'],slide_content['text_content'],slide_content['image_urls']
         

api/main.py

@@ -102,6 +102,15 @@ async def get_home_page(request: Request, response: Response, Authorize: AuthJWT
     current_user = Authorize.get_jwt_subject()
     return templates.TemplateResponse("make_video.html", {"request": request, "response": response})
 
+@app.get("/make_video_slide", response_class=HTMLResponse)
+async def make_video_slide(request: Request, response: Response, Authorize: AuthJWT = Depends()):
+    try:
+        Authorize.jwt_required()
+    except Exception as e:
+        print(e)
+        return '請先登入帳號'
+    current_user = Authorize.get_jwt_subject()
+    return templates.TemplateResponse("make_video_slide.html", {"request": request, "response": response})
 
 @app.get('/user_profile', response_class=HTMLResponse)
 def protected(request: Request, Authorize: AuthJWT = Depends()):
@@ -211,13 +220,13 @@ async def create_upload_file(file: UploadFile = File(...)):
 
 @app.post("/make_anchor_video_gSlide")
 async def make_anchor_video_gSlide(req:models.gSlide_req,token: str = Depends(oauth2_scheme)):
-    gSlide.parse_slide_url()
+    name, text_content, image_urls = gSlide.parse_slide_url(req.slide_url)
     if len(image_urls) != len(text_content):
         return {'msg':'副標題數量、圖片(影片)數量以及台詞數量必須一致'}
     for idx in range(len(image_urls)):
         if 'http' not in image_urls[idx]:
             image_urls[idx] = 'http://'+image_urls[idx]
-    if multiLang==0:
+    if req.multiLang==0:
         for txt in text_content:
             if re.search('[a-zA-Z]', txt) !=None:
                 print('語言錯誤')
@@ -234,7 +243,7 @@ async def make_anchor_video_gSlide(req:models.gSlide_req,token: str = Depends(oa
             return {'msg':"無法辨別圖片網址"+imgu}
     user_id = get_user_id(token)
     save_history(req,name_hash,user_id)
-    x = threading.Thread(target=gen_video_queue, args=(name_hash,name, text_content, image_urls,int(avatar),multiLang,user_id))
+    x = threading.Thread(target=gen_video_queue, args=(name_hash,name, text_content, image_urls,int(req.avatar),req.multiLang,user_id))
     x.start()
     return {"msg":"製作影片需要時間，請您耐心等候，成果會傳送至LINE群組中"} 
 

api/models.py

@@ -19,6 +19,9 @@ class request(BaseModel):
 
 class gSlide_req(BaseModel):
     slide_url: str
+    avatar: str
+    client_id :str
+    multiLang :int
 
 class request_eng(BaseModel):
     name: str

api/static/script_util.js

@@ -126,6 +126,38 @@ $(".next").click(function () {
   result = xhr.send(objstr);
 });
 
+$("#send_slide").click(function () {
+  button.setAttribute('disabled', '');
+  setTimeout(function () {
+    button.removeAttribute('disabled')
+  }, 4000);
+  avatar = $('.avatar').val();
+  var step;
+  multiLang = 0
+  if ($('#multiLang').prop("checked")) {multiLang = 1;}
+  dataOBJ = {'slide_url':$('#slide_raw_url').val(),"avatar": avatar,"multiLang":multiLang, "client_id": client_id }
+  objstr = JSON.stringify(dataOBJ);
+  jwt_token =  get_jwt_token()
+  var xhr = new XMLHttpRequest();
+  xhr.open("POST", "/make_anchor_video_gSlide");
+  xhr.setRequestHeader("accept", "application/json");
+  xhr.setRequestHeader("Authorization","Bearer "+jwt_token)
+  xhr.setRequestHeader("Content-Type", "application/json");
+  xhr.onreadystatechange = function () {
+    if (xhr.readyState === 4) {
+      Swal.fire({
+        title: "資料已送出",
+        icon: 'success',
+        text: '資料已傳送，請耐心等候',
+        confirmButtonColor: '#3085d6',
+      });
+    }
+  };
+  var data = renderXHR_data(dataOBJ)
+  console.log(data)
+  result = xhr.send(objstr);
+});
+
 $(".gen_avatar").click(function () {
   dataOBJ = { "imgurl": $('.img_src').val() }
   objstr = JSON.stringify(dataOBJ);

api/templates/index.html

@@ -31,7 +31,7 @@
     <!-- navbar -->
     <nav class="navbar navbar-expand-lg navbar-light">
         <div class="container-fluid">
-            <a class="navbar-brand" href="/index">AI Anchor Go</a>
+            <a class="navbar-brand" href="/index">AI Spokesgirl</a>
             <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                 data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                 aria-label="Toggle navigation">
@@ -41,6 +41,7 @@
                 <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                     <li class="nav-item">
                         <a class="nav-link active btn-gocreate text-white" aria-current="page" href="/make_video">製作影片</a>
+                        <a class="nav-link active btn-gocreate text-white" aria-current="page" href="/make_video_slide">SLIDE製作影片</a>
                     </li>
                 </ul>
                 

api/templates/make_video_slide.html

@@ -0,0 +1,149 @@
+{% extends "index.html" %}
+{% block title %}Login{% endblock %}
+{% block head %}
+{{ super() }}
+{% endblock %}
+{% block content %}
+
+
+
+  <div class="container-fluid">
+    <div id="mySidenav" class="sidenav">
+      <!-- <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a> -->
+      <h2 class="go_title" href="/index"><a class="nav-link active" aria-current="page" href="/index">AI Spokes Girl</a></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>
+      </ul>
+      <p class="right-text text-white d-inline-block">Choozmo All Rights Reserved</p>
+    </div>
+
+    <!-- <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span> -->
+    <div class="content ms-auto">
+      <form id="msform">
+        <div class="linker__box">
+          <p>預覽影片</p>
+          <i class="fas fa-link"></i>
+          <a id='linker' style="display: none;" class="ms-2">影片連結</a>
+        </div>
+        <!-- fieldsets -->
+        <fieldset>
+          <h3 class="fs-subtitle">SLIDE 連結<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題"></h3>
+          <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="標題" /><label for="myCheck">加入英文:</label> 
+          <input type="checkbox" id="multiLang" > <br/>
+        </fieldset>
+        <fieldset>
+          <h3  class="fs-subtitle">選擇人物<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者"></h3>
+          <select id="avatar" class='avatar'>
+            <option value="7">Peggy</option>
+            <option value="8">Stacy</option>
+            <option value="10">Nina黑</option>
+            <option value="9">Nina灰</option>
+            <option value="11">Summer韓小夏</option>
+            <option value="12">Jocelyn</option>
+            <option value="12">Angela</option>
+          </select>
+          <div class="owl-carousel owl-theme">
+            <div class="card item" data-avatar="Peggy" data-img="peggy">
+              <div class="imgfr"><img src="static/img/peggy.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Peggy</h5>
+              </div>
+            </div>
+            <div class="card item" data-avatar="Stacy" data-img="stacy">
+              <div class="imgfr"><img src="static/img/stacy.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Stacy</h5>
+              </div>
+            </div>
+            <div class="card item" data-avatar="Nina黑" data-img="ninablack">
+              <div class="imgfr"><img src="static/img/ninablack.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Nina黑</h5>
+              </div>
+            </div>
+            <div class="card item" data-avatar="Nina灰" data-img="ninawhite">
+              <div class="imgfr"><img src="static/img/ninawhite.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Nina灰</h5>
+              </div>
+            </div>
+            <div class="card item" data-avatar="Summer韓小夏" data-img="summer">
+              <div class="imgfr"><img src="static/img/summer.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Summer韓小夏</h5>
+              </div>
+            </div>
+            <div class="card item" data-avatar="Jocelyn" data-img="Jocelyn">
+              <div class="imgfr"><img src="static/img/Jocelyn.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Jocelyn</h5>
+              </div>
+            </div>
+            <div class="card item" data-avatar="Angela" data-img="Angela">
+              <div class="imgfr"><img src="static/img/Angela.webp" class="card-img-top" alt="..."></div>
+              <div class="card-body">
+                <h5 class="card-title">Angela</h5>
+              </div>
+            </div>
+          </div>
+        </fieldset>
+        <input id="send_slide" type="button" name="next" class="action-button" value="送出" />
+      </form>
+      <!-- <div style="width: 80%;margin: 0 auto;"><iframe src="http://www.choozmo.com:8168/ai_anchor_video/16250306886652043.mp4" frameborder="0" style="width: 100%;height: 400px;"></iframe></div> -->
+    </div>
+    
+    <div class="modal fade" tabindex="-1" id="howto" aria-labelledby="howto" aria-hidden="true">
+      <div class="modal-dialog">
+        <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">
+                  <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 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 class="modal" tabindex="-1"  id="avatarmega" aria-labelledby="history" aria-hidden="true">
+    <div class="modal-dialog modal-dialog-centered">
+      <div class="modal-content text-center">
+        <div class="modal-header">
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><img src="static/img/close.svg" alt=""></button>
+        </div>
+        <div class="modal-body">
+          <img class="modal-img" src="" alt="">
+          <h5 class="modal-title mt-2"></h5>
+        </div>
+      </div>
+    </div>
+  </div>
+  </div>
+  
+  
+
+  {% endblock %}