Merge branch 'master' of http://git.choozmo.com:3000/choozmo/AI_Anchor_2 into master

OpenshotService/openshot_video_generator.py

@@ -528,7 +528,36 @@ def generate_subtitle_image(name_hash,text_content):
             sv_path = dir_subtitle + name_hash +'/'+str(idx)+ str(inner_idx) +'.png'
             sub = senList[inner_idx]
             txt2image(sub,sv_path)
-            img_list[idx]+=[{"count":len(sub),"path":sv_path}]
+            clean_content = trim_punctuation(sub)
+
+
+            re.findall(r'[\u4e00-\u9fff]+', clean_content)
+
+            zh_idx = []
+            eng_idx= []
+            for i in range(len(clean_content)):
+                if clean_content[i] > u'\u4e00' and clean_content[i] < u'\u9fff':
+                    zh_idx.append(i)
+                else:
+                    eng_idx.append(i)
+
+            space_index = [m.start() for m in re.finditer(' ', clean_content)]
+            for s_idx in space_index:
+                eng_idx.remove(s_idx)
+            
+            eng_range_list = []
+            for k, g in groupby(enumerate(eng_idx), lambda ix : ix[0] - ix[1]):
+                eng_range = list(map(itemgetter(1), g))
+                eng_range_list.append(eng_range)
+
+            total_syllable = 0
+            for i in range(len(eng_range_list)):
+                total_syllable += (syllable_count(clean_content[eng_range_list[i][0]:eng_range_list[i][-1]+1])+0.5)
+            for i in range(len(zh_idx)):
+                total_syllable+=1
+
+
+            img_list[idx]+=[{"count":total_syllable,"path":sv_path}]
     return img_list
 
 def generate_subtitle_image_ENG(name_hash,text_content):

api/main.py

@@ -100,13 +100,13 @@ async def get_home_page(request: Request, response: Response):
 async def get_home_page(request: Request, response: Response):
     return templates.TemplateResponse("index.html", {"request": request, "response": response})
 
-@app.get("/make_video", response_class=HTMLResponse)
+@app.get("/make_video")
 async def get_home_page(request: Request, response: Response, Authorize: AuthJWT = Depends()):
     try:
         Authorize.jwt_required()
     except Exception as e:
         print(e)
-        return '請先登入帳號'
+        return {'msg':{'eng':'Please login first','zh':'請先登入帳號'}}
     current_user = Authorize.get_jwt_subject()
     return templates.TemplateResponse("make_video.html", {"request": request, "response": response})
 
@@ -116,7 +116,7 @@ async def get_home_page(request: Request, response: Response, Authorize: AuthJWT
         Authorize.jwt_required()
     except Exception as e:
         print(e)
-        return '請先登入帳號'
+        return {'msg':{'eng':'Please login first','zh':'請先登入帳號'}}
     current_user = Authorize.get_jwt_subject()
     return templates.TemplateResponse("make_video_long.html", {"request": request, "response": response})
 
@@ -126,7 +126,7 @@ async def make_video_slide(request: Request, response: Response, Authorize: Auth
         Authorize.jwt_required()
     except Exception as e:
         print(e)
-        return '請先登入帳號'
+        return {'msg':{'eng':'Please login first','zh':'請先登入帳號'}}
     current_user = Authorize.get_jwt_subject()
     return templates.TemplateResponse("make_video_slide.html", {"request": request, "response": response})
 
@@ -147,13 +147,24 @@ async def user_profile(token: str = Depends(oauth2_scheme)):
     left_sec = user_obj['left_time']
 
     video_info_list = []
-    statement = 'SELECT * FROM history_input WHERE user_id='+str(user_obj['id'])
+    statement = 'SELECT * FROM history_input WHERE user_id='+str(user_obj['id'])+' ORDER BY timestamp DESC LIMIT 50'
     for row in db.query(statement):
         video_info_list.append({'id':row['id'],'title':row['name'],'duration':row['duration'],'url':row['link'],'time_stamp':row['timestamp'].strftime("%m/%d/%Y, %H:%M:%S")})
     dic_return = {'user_info':{'id':user_id,'userName':user_obj['username'],'email':user_obj['email'],'video_num':video_num,'total_sec':total_sec,'left_sec':user_obj['left_time']},'video_info':video_info_list}
     str_return = json.dumps(dic_return)
     return str_return
 
+@app.post('/edit_profile')
+async def edit_profile(userModel : models.UserProfile ,token: str = Depends(oauth2_scheme)):
+    db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/AI_anchor?charset=utf8mb4')
+    print(token)
+    user_id = get_user_id(token)
+    print(user_id)
+    user_obj = next(iter(db.query('SELECT * FROM users where id ="'+str(user_id)+'"')))
+    user_obj['email'] = userModel.email
+    db['users'].update(user_obj,['id'])
+    return {'msg':'ok'}
+
 # login & register page
 @app.get("/login", response_class=HTMLResponse)
 async def get_login_and_register_page(request: Request):
@@ -216,13 +227,13 @@ async def register_old(request: Request):
             code = str(time.time()).replace('.','')
             db['register_veri_code'].insert({'code':code,'user_id':id})
             mailer.register_verify('請至點擊網址驗證 : https://www.choozmo.com:8887/verify_email?code='+code, user.email)
-            return '註冊成功! 請回到上頁登入帳號'
+            return {'msg':{'eng':'Register success! Please login at previous page','zh':'註冊成功! 請回到上頁登入帳號'}}
         else :
             return {'msg':'error'}
         #return templates.TemplateResponse("make_video.html", {"request": request, "success": True},status_code=status.HTTP_302_FOUND)
         #return templates.TemplateResponse("login.html", {'request': request,"success": True}, status_code=status.HTTP_302_FOUND)
     else:
-        return {'msg':user.username+'重複，請更改'}
+        return {'msg':{'eng':user.username+' is duplicated user name try another','zh':user.username+'重複，請更改'}}
 
 @app.post("/register")
 async def register(request: models.register_req):
@@ -235,11 +246,11 @@ async def register(request: models.register_req):
             code = str(time.time()).replace('.','')
             db['register_veri_code'].insert({'code':code,'user_id':id})
             mailer.register_verify('請至點擊網址驗證 : https://www.choozmo.com:8887/verify_email?code='+code, request.email)
-            return '註冊成功! 請回到上頁登入帳號'
+            return {'msg':{'eng':'Register success! Please login at previous page','zh':'註冊成功! 請回到上頁登入帳號'}}
         else :
             return {'msg':'error'}
     else:
-        return {'msg':request.username+':使用者名稱重複，請更改'}
+        return {'msg':{'eng':user.username+' is duplicated user name try another','zh':user.username+'重複，請更改'}}
 
 
 @app.get('/logout')
@@ -480,6 +491,57 @@ async def make_anchor_video_eng(req:models.request_eng,token: str = Depends(oaut
     x.start()
     return {"msg":"ok"} 
 
+@app.post("/save_draft")
+async def save_draft(req:models.video_draft,token: str = Depends(oauth2_scheme)):
+    db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/AI_anchor?charset=utf8mb4')
+    user_id = get_user_id(token)
+    
+    txt_content_seperate_by_dot = ''
+    for txt in req.text_content:
+        txt_content_seperate_by_dot += txt+","
+    txt_content_seperate_by_dot = txt_content_seperate_by_dot[:-1]
+    img_urls_seperate_by_dot = ''
+    for iurl in req.image_urls:
+        img_urls_seperate_by_dot += iurl+","
+    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")
+
+    if req.id==-1:
+        pk = db['draft'].insert({'title':req.title,'text_content':txt_content_seperate_by_dot,'image_urls':img_urls_seperate_by_dot
+        ,'user_id':user_id,'avatar':req.avatar,'multiLang':req.multiLang,'time_stamp':time_stamp})
+    else:
+        db['draft'].update({'id':req.id,'title':req.title,'text_content':txt_content_seperate_by_dot,'image_urls':img_urls_seperate_by_dot
+        ,'user_id':user_id,'avatar':req.avatar,'multiLang':req.multiLang,'time_stamp':time_stamp},['id'])
+    
+    return {'msg':'ok'}
+
+
+@app.post('/draft_list')
+async def draft_list(token: str = Depends(oauth2_scheme)):
+    db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/AI_anchor?charset=utf8mb4')
+    user_id = get_user_id(token)
+    statement = 'SELECT * FROM draft WHERE user_id='+str(user_id)+' ORDER BY time_stamp DESC LIMIT 50'
+    logs = []
+    for row in db.query(statement):
+        logs.append({'id':row['id'],'title':row['title'],'avatar':row['avatar'],'mulitLang':row['multiLang']
+        ,'text_content':row['text_content'].split(','),'image_urls':row['image_urls'].split(',')})
+    return logs
+
+@app.post('/del_draft')
+async def del_draft(id_obj:models.id_obj,token: str = Depends(oauth2_scheme)):
+    db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/AI_anchor?charset=utf8mb4')
+    user_id = get_user_id(token)
+    statement = 'SELECT * FROM draft WHERE user_id="'+str(user_id)+'" and id ="'+id_obj.id+'"'
+    if first(db.query(statement)) is not None:
+        db['draft'].delete(id=id)
+    else:
+        return {'msg':'wrong id'}
+    
+
+    return {'msg':'ok'}
+
+
 @app.get("/history_input_old")
 async def history_input_old(request: Request, Authorize: AuthJWT = Depends()):
     Authorize.jwt_required()

api/models.py

@@ -2,6 +2,9 @@ from pydantic import BaseModel
 from typing import List, Optional
 SECRET_KEY = "df2f77bd544240801a048bd4293afd8eeb7fff3cb7050e42c791db4b83ebadcd"
 ALGORITHM = "HS256"
+class id_obj(BaseModel):
+    id: int
+    
 class Token(BaseModel):
     access_token: str
     token_type: str
@@ -66,3 +69,13 @@ class reset_pwd(BaseModel):
     code: str
     password: str
 
+class UserProfile(BaseModel):
+    email: str
+
+class video_draft(BaseModel):
+    id: int
+    title: str
+    avatar: int
+    text_content: List[str]
+    multiLang: int
+    image_urls: List[str]

api/static/lan.js

@@ -40,7 +40,7 @@ var zh = {
     "sup_img_profile": "2. 影像連結檔案格式支援：",
     "submit_to_wait": "3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看",
     "add_eng": "加入英文:",
-    "submut": "送出",
+    "submit": "送出",
     "privacy_term": "同意隱私政策及使用條款"
 };
 
@@ -67,7 +67,7 @@ var en = {
     "sup_img_profile": "2. Support File Format:",
     "submit_to_wait": "3. After Clicking Submit, You Will Need To Wait For A Period Of Time For The Production Of The Video. Please Wait Patiently. You Can Check It At The Notification URL When The Production Is Completed.",
     "add_eng": "Allow English Lines:",
-    "submut": "Submit",
+    "submit": "Submit",
     "privacy_term": "I Agree to privacy policy and terms of use."
 };
 
@@ -118,6 +118,8 @@ function changeLan(val) {
                 console.log("placeholder");
                 console.log(t);
             case 'val':
+                me.val(t);
+                break;
             case 'value':
                 me.val(t);
                 break;
@@ -161,4 +163,3 @@ function get_lan(m)
 // 預設中文版
 var lan = getCookie('lan');
 console.log(`目前語言版本: ${lan}`);
-changeLan(lan);

api/templates/make_video_slide.html

@@ -31,7 +31,7 @@
           <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="連結" /><input id="img3" type="file" class="pttx_uploader">
           <input id ='url_type' type='hidden' value='0'>
-          <label for="myCheck">加入英文:</label> 
+          <label for="myCheck" set-lan="html:add_eng">加入英文:</label> 
           <input type="checkbox" id="multiLang" > <br/>
         </fieldset>
         <fieldset>

api/test.py

@@ -8,9 +8,11 @@ import first
 
 def prof():
     db = dataset.connect('mysql://choozmo:pAssw0rd@db.ptt.cx:3306/AI_anchor?charset=utf8mb4')
+    user_id = 36
 
-    statement = 'SELECT * FROM history_input WHERE user_id=36'
-    for row in db.query(statement):
-        print(type(row['timestamp'].strftime("%m/%d/%Y, %H:%M:%S")
+
+    user_obj = next(iter(db.query('SELECT * FROM users where id ="'+str(user_id)+'"')))
+    user_obj['email'] = 'ming'
+    db['users'].update(dict(user_obj), ['id'])
 
 prof()

html/index.html

@@ -77,38 +77,38 @@
     <div class="price-int mt-5">
         <div class="price-content m-auto">
             <div class="price-content-1 text-center">
-                <h1 class="pb-5 pe-3"><i style="color:#EA5413" class="fas fa-tags pe-2"></i>限時早鳥方案</h1>
+                <h1 class="pb-5 pe-3"><i style="color:#EA5413" class="fas fa-tags pe-2"></i><lan set-lan="html:launch_special">限時早鳥方案</lan></h1>
                 <div class="row">
                     <div class="col-12 col-lg-4">
                         <a href="./pricing.html"><img style="width: 128px;" src="./static/img/book.png" alt=""></a>                     
-                        <h2>語言選擇: 中文 | 英文</h2>
+                        <h2 set-lan="html:pricing_lan">語言選擇: 中文 | 英文</h2>
                         <ul class="price-text ms-lg-5 ms-3">
-                            <li>支援中英文內容</li>
-                            <li>可加入字幕</li>
+                            <li set-lan="html:index_li1_1">支援中英文內容</li>
+                            <li set-lan="html:index_li1_2">可加入字幕</li>
                         </ul>
                     </div>
                     <div class="col-12 col-lg-4">
                         <a href="./pricing.html"><img style="width: 128px;" src="./static/img/news-anchor (1).png" alt=""></a>
-                        <h2>多款預設AI代言主播任你選</h2>
+                        <h2 set-lan="html:pricing_avatars">多款預設AI代言主播任你選</h2>
                             <ul class="price-text ms-3">
-                                <li>無人物肖像權問題</li>
-                                <li>人物表情、動作自然</li>
-                                <li>因應主題，選擇合適人物</li>
+                                <li set-lan="html:index_li2_1">無人物肖像權問題</li>
+                                <li set-lan="html:index_li2_2">人物表情、動作自然</li>
+                                <li set-lan="html:index_li2_3">因應主題，選擇合適人物</li>
                             </ul>
                     </div>
                     <div class="col-12 col-lg-4">
                         <a href="./pricing.html"><img style="width: 128px;" src="./static/img//transfer.png" alt=""></a>                    
-                        <h2>畫面素材支援: 圖檔 | 影檔 | 簡報</h2>
+                        <h2 set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</h2>
                         <ul class="price-text ms-1">
-                            <li>可上傳圖片或是影片作為背景</li>
-                            <li>可輸入文字腳本及投影片</li>
+                            <li set-lan="html:index_li3_1">可上傳圖片或是影片作為背景</li>
+                            <li set-lan="html:index_li3_2">可輸入文字腳本及投影片</li>
                         </ul>
                     </div>
                 </div>
              
                 <!-- <h1 class="mt-5 d-inline pe-5">$1200/7min</h1> -->
-                <p class="mt-5">想要快速製作影音內容？立即註冊，開始創作！</p>
-                <a href="./pricing.html"><button class="get-started my-3">立即查看</button></a>
+                <p class="mt-5" set-lan="html:index_action">想要快速製作影音內容？立即註冊，開始創作！</p>
+                <a href="./pricing.html"><button class="get-started my-3" set-lan="html:pricing_checkout">立即查看</button></a>
             </div>
         </div>
     </div>
@@ -126,7 +126,7 @@
                 <div class="col-xs-12 col-sm-6">
                     <img src="./static/img/contactus/choozmo (2).png" alt="" width="250">
                     <div class="footer-aigirl">Choozmo AI Spokesgirl</div>
-                    <div class="footer-follow">關注我們</div>
+                    <div class="footer-follow" set-lan="html:follow_us">關注我們</div>
                     <div class="footer-socials">
                         <a href="https://www.linkedin.com/company/choozmo/"><img src="./static/img/contactus/linkedin-logo-copy.png" alt="" width="32px" height="32px"></a>
                         <a href="https://www.facebook.com/choozmo/"><img src="./static/img/contactus/facebook_logos_PNG19753.png" alt="" width="32px" height="32px"></a>
@@ -140,7 +140,7 @@
                     <div class="footer-contacts">
                         <h5>CONTACT</h5>
                         <div>
-                            集仕多股份有限公司<br>新竹縣竹北市復興二路229號9樓之9<br>聯絡電話：036670804<br>聯絡信箱：SERVICE@CHOOZMO.COM
+                            <lan set-lan="html:contact_name">集仕多股份有限公司</lan><br><lan set-lan="html:address">新竹縣竹北市復興二路229號9樓之9</lan><br><lan set-lan="html:contact_tel">聯絡電話</lan>：036670804<br><lan set-lan="html:contact_mail">聯絡信箱</lan>：SERVICE@CHOOZMO.COM
                         </div>
                     </div>
                 </div>

html/index_eng.html

@@ -66,7 +66,7 @@
                   class="fas fa-book-open me-2"></i>
               <lan>Usage Introduction</lan>
           </li>
-          <a style="text-decoration: none;color:white;" href="./user_profile.html">
+          <a style="text-decoration: none;color:white;" href="./user_profile2.html">
               <li class="nav-list-item pb-1 mb-3 text-start ps-3" data-bs-toggle="modal">
                   <i class="fas fa-user me-2"></i>
                  <lan>User Profile</lan>

html/login.html

@@ -74,8 +74,8 @@
                     <source src="static/img/登入影片.mp4" type="video/mp4">
                 </video>
                 <div class="row-img-box text-center">
-                    <h2>將你的生活、創作 、宣傳做成影片</h2>
-                    <h4>開始使用 AI Spokesgirl</h4>
+                    <h2 set-lan="html:logleftbox1">將你的生活、創作 、宣傳做成影片</h2>
+                    <h4 set-lan="html:logleftbox2">開始使用 AI Spokesgirl</h4>
                 </div>
                 <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
             </div>

html/make_video.html

@@ -85,11 +85,15 @@
                 </div>
                 <div class="userName"></div> 
                 <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
-                <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+                <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
                 <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
                     <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
                     <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影影片製作</a>
                 </div>
+                <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">英文影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                </div>
                 <hr>
                 <ul class="nav-list ps-0">
                     <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -99,7 +103,7 @@
                     <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                         <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                             <i class="fas fa-user me-2"></i>
-                           <lan set-lan="user_profile">會員資料</lan>
+                           <lan set-lan="html:user_profile">會員資料</lan>
                         </li>
                     </a>
                     <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
@@ -134,11 +138,11 @@
                     </div>
                     <!-- fieldsets -->
                     <fieldset>
-                        <h3 class="fs-subtitle"><lan set-lan="html:video_title">標題</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題"></h3>            
+                        <h3 class="fs-subtitle"><lan set-lan="html:video_title">標題</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的內嵌標題 The title of your video"></h3>            
                         <input id=title type="text" name='t1' class='title_new' value="" placeholder="標題" /> <br/>
                     </fieldset>
                     <fieldset>
-                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者"></h3>            
+                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>            
                         <select id="avatar" class='avatar'>
                             <option set-lan="html:p_choose_character" value="請選擇人物" selected="selected" disabled>>請選擇人物</option>              
                             <option value="7">Peggy</option>
@@ -204,11 +208,11 @@
                         <span class="add">+</span>
                     </fieldset>
                     <fieldset id='imgSrc'>
-                        <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
+                        <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:img_link">影像連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式 Support File Formats: png, jpg, mp4"></h3><br/>
                         <div class="img-inputs">
                         </div>
                         <span class="addimg">+</span>
-                        <input id="checker" type="button" name="next" class="next action-button" set-lan="val:submit" value="送出" />
+                        <input id="checker" type="button" name="next" class="next action-button" set-lan="value:submit" value="送出" />
                         <h3 style="display: none;" class="fs-subtitle"><lan set-lan="html:processing_progress">處理進度</lan></h3>
                         <div style="display: none;" id="myProgress">
                             <div style="display: none;" id="myBar">0%</div>

html/make_video_long.html

@@ -85,11 +85,15 @@
                 </div>
                 <div class="userName"></div>            
                 <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
-                <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+                <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
                 <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
                     <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
                     <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
                 </div>
+                <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">英文影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                </div>
                 <hr>
                 <ul class="nav-list ps-0">
                     <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -99,7 +103,7 @@
                     <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                         <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                             <i class="fas fa-user me-2"></i>
-                           <lan set-lan="user_profile">會員資料</lan>
+                           <lan set-lan="html:user_profile">會員資料</lan>
                         </li>
                     </a>
                     <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">

html/make_video_slide.html

@@ -85,11 +85,15 @@
                 </div>
                 <div class="userName"></div> 
                 <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
-                <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+                <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
                 <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
                     <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
                     <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
                 </div>
+                <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">英文影片製作</a>
+                    <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+                </div>
                 <hr>
                 <ul class="nav-list ps-0">
                     <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -99,7 +103,7 @@
                     <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                         <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                             <i class="fas fa-user me-2"></i>
-                           <lan set-lan="user_profile">會員資料</lan>
+                           <lan set-lan="html:user_profile">會員資料</lan>
                         </li>
                     </a>
                     <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
@@ -135,12 +139,12 @@
                     </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> 
+                        <h3 class="fs-subtitle"><lan set-lan="html:slide_link">SLIDE 連結</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="請輸入Google Slides連結 Google Slides Link"></h3>
+                        <input id=slide_raw_url type="text" name='t1' class='title_new' value="" placeholder="連結" /><label for="myCheck" set-lan="html:add_eng">加入英文:</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>
+                        <h3  class="fs-subtitle"><lan set-lan="html:choose_character">選擇人物</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="將作為影片的講者 The spokesgirl of your video"></h3>
                         <select id="avatar" class='avatar'>
                             <option value="7">Peggy</option>
                             <option value="8">Stacy</option>
@@ -195,7 +199,7 @@
                             </div>
                         </div>
                     </fieldset>
-                    <input id="send_slide" type="button" name="next" class="action-button" value="送出" />
+                    <input id="send_slide" type="button" name="next" class="action-button" set-lan="value:submit" 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>
@@ -267,8 +271,7 @@
     <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/owl.carousel.min.js"></script>
-    <script src="static/script_util.js"></script>
-    <script src="script_index.js"></script>
+    <script src="static/script_slides.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>

html/pricing.html

@@ -90,18 +90,18 @@
                             <h3 class="title">早鳥方案</h3>
                         </div>
                         <ul class="pricing-content">
-                            <li>語言選擇: 中文 | 英文</li>
-                            <li>多款預設AI代言主播任你選</li>
-                            <li>畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
                             <!-- <li class="disable">Maintenance</li>
                             <li class="disable">15 Subdomains</li> -->
                         </ul>
                         <div class="price-value">
-                            <span class="price-title">限時優惠</span>
-                            <span class="price-amount">$1200 <span class="duration">7分鐘</span></span>
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
                         </div>
                         <div class="pricingTable-signup">
-                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank">立即查看</a>
+                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank" set-lan="html:pricing_checkout">立即查看</a>
                         </div>
                     </div>
                 </div>
@@ -118,18 +118,18 @@
                             <h3 class="title">早鳥方案</h3>
                         </div>
                         <ul class="pricing-content">
-                            <li>語言選擇: 中文 | 英文</li>
-                            <li>多款預設AI代言主播任你選</li>
-                            <li>畫面素材支援: 圖檔 | 影檔 | 簡報</li>
+                            <li set-lan="html:pricing_lan">語言選擇: 中文 | 英文</li>
+                            <li set-lan="html:pricing_avatars">多款預設AI代言主播任你選</li>
+                            <li set-lan="html:pricing_content">畫面素材支援: 圖檔 | 影檔 | 簡報</li>
                             <!-- <li class="disable">Maintenance</li>
                             <li class="disable">15 Subdomains</li> -->
                         </ul>
                         <div class="price-value">
-                            <span class="price-title">限時優惠</span>
-                            <span class="price-amount">$1200 <span class="duration">7分鐘</span></span>
+                            <span class="price-title" set-lan="html:pricing_discount">限時優惠</span>
+                            <span class="price-amount">$1200 <span class="duration">7<lan set-lan="html:mins">分鐘</lan></span></span>
                         </div>
                         <div class="pricingTable-signup">
-                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank">立即查看</a>
+                            <a href="https://p.ecpay.com.tw/B3701C8" target="_blank" set-lan="html:pricing_checkout">立即查看</a>
                         </div>
                     </div>
                 </div>
@@ -166,7 +166,6 @@
         integrity="sha512-Y/Pox7RqKmT84klgmJCva3drWoXQWO42oHiWWhb9zd1pkIH60NF2SamgBrFHOTzrzHJhwgPGNGjNJ5ZmxLpUAQ=="
         crossorigin="anonymous" referrerpolicy="no-referrer"></script>
     <script src="static/owl.carousel.min.js"></script>
-    <script src="login.js"></script>
     <script type="text/javascript" src="static/lan.js"></script>
     <script src="static/common.js"></script>
 </body>

html/register.html

@@ -74,8 +74,8 @@
                     <source src="static/img/登入影片.mp4" type="video/mp4">
                 </video>
                 <div class="row-img-box text-center">
-                    <h2>將你的生活、創作 、宣傳做成影片</h2>
-                    <h4>開始使用 AI Spokesgirl</h4>
+                    <h2 set-lan="html:logleftbox1">將你的生活、創作 、宣傳做成影片</h2>
+                    <h4 set-lan="html:logleftbox2">開始使用 AI Spokesgirl</h4>
                 </div>
                 <div class="row-img-txt text-center">ChoozMo AI Spokesgirl</div>
             </div>

html/reset_pwd.html

@@ -20,6 +20,41 @@
   
 </head>
 <body>
+  <nav class="navbar navbar-expand-lg navbar-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="index.html">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">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        中/En
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
   <div class="container-fluid">
     <div id="mySidenav" class="sidenav">
       <div class="text-start mt-3">
@@ -28,11 +63,15 @@
       </div>
       <div class="userName"></div> 
       <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
-      <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+      <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
       <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
           <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
           <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
       </div>
+      <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+        <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">英文影片製作</a>
+        <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+        </div>
       <hr>
       <ul class="nav-list ps-0">
           <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -42,7 +81,7 @@
           <a style="text-decoration: none;color:white;" href="./user_profile2.html">
               <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                   <i class="fas fa-user me-2"></i>
-                 <lan set-lan="user_profile">會員資料</lan>
+                 <lan set-lan="html:user_profile">會員資料</lan>
               </li>
           </a>
           <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
@@ -71,18 +110,53 @@
     <div class="content ms-auto">
       <form id="msform">
         <fieldset id='imgSrc'>
-          <h3 class="fs-subtitle" style="display: inline-block;">新密碼<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
+          <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:new_pwd">新密碼</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
           <input type="text" id='in_pwd' name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><br/>
-          <h3 class="fs-subtitle" style="display: inline-block;">驗證碼<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
+          <h3 class="fs-subtitle" style="display: inline-block;"><lan set-lan="html:confirm_pwd">驗證碼</lan><img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
           <input type="text" id='code' name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><br/>
         
-          <input id="checker" type="button" class="sender action-button" value="送出" />
+          <input id="checker" type="button" class="sender action-button" set-lan="value:submit" value="" />
 
         </fieldset>
       </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>
@@ -95,6 +169,8 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
   <script src="./reset_pwd.js"></script>
+  <script type="text/javascript" src="static/lan.js"></script>
+  <script src="static/common.js"></script>
 
   <body>
 

html/reset_pwd.js

@@ -1,3 +1,13 @@
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
 function renderXHR_data(jsonObj) {
    XHRstring = ''
    for (const [key, value] of Object.entries(jsonObj)) {
@@ -18,7 +28,7 @@ $(".sender").click(function () {
   var pwd = $("#in_pwd").val();
   var code = $("#code").val();
   
-  var url = "/reset_pwd";
+  var url = "https://www.choozmo.com:8887/reset_pwd";
 
 var xhr = new XMLHttpRequest();
 xhr.open("POST", url);
@@ -36,3 +46,72 @@ var data = `{"code":"`+ code+`","password":"`+pwd+`"}`
 
 xhr.send(data);
 });
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    for (var obj of loaded_data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function direct(id) {
+    location.href = `make_video.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }
+

html/reset_pwd_email.html

@@ -20,6 +20,41 @@
  
 </head>
 <body>
+  <nav class="navbar navbar-expand-lg navbar-light">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="index.html">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">
+            <span class="navbar-toggler-icon"></span>
+        </button>
+        <div class="collapse navbar-collapse" id="navbarSupportedContent">
+            <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
+                <li class="nav-item">
+                    <a class="nav-link active" aria-current="page" href="pricing.html" set-lan="html:pricing">早鳥方案</a>
+                </li>
+                <li class="nav-item dropdown">
+                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        中/En
+                    </a>
+                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
+                        <li><button class="nav-link lan-swtich" aria-current="page" set-lan="html:en" onclick="changeLan(this)" value="en">English</button></li>
+                        <li><button class="nav-link lan-switch" aria-current="page" set-lan="html:zh" onclick="changeLan(this)" value="zh">中文</button></li>
+                    </ul>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link active btn-login" aria-current="page" href="login.html" set-lan="html:login">登入</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link btn-userProfile" aria-current="page" href="./user_profile2.html" set-lan="html:user_profile">會員資料</a>
+                </li>
+                <li class="nav-item">
+                    <a class="nav-link btn-logout" aria-current="page" set-lan="html:logout">登出</a>
+                </li>
+            </ul>
+        </div>
+    </div>
+</nav>
   <div class="container-fluid">
     <div id="mySidenav" class="sidenav">
       <div class="text-start mt-3">
@@ -28,11 +63,15 @@
       </div>
       <div class="userName"></div> 
       <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
-      <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+      <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
       <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
           <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
           <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
       </div>
+      <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+        <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">英文影片製作</a>
+        <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+        </div>
       <hr>
       <ul class="nav-list ps-0">
           <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -42,7 +81,7 @@
           <a style="text-decoration: none;color:white;" href="./user_profile2.html">
               <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                   <i class="fas fa-user me-2"></i>
-                 <lan set-lan="user_profile">會員資料</lan>
+                 <lan set-lan="html:user_profile">會員資料</lan>
               </li>
           </a>
           <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
@@ -74,13 +113,48 @@
           <h3 class="fs-subtitle" style="display: inline-block;">email<img class="ms-1" src="static/img/question.png" alt="" data-bs-toggle="tooltip" data-bs-placement="right" title="僅接受png, jpg, mp4格式"></h3><br/>
           <input type="text" id='in_email' name='m1' class='imgsrc imgsrc1' value="" placeholder="1" /><br/>
         
-          <input id="checker" type="button" class="sender action-button" value="送出" />
+          <input id="checker" type="button" class="sender action-button" value="送出" set-lan="value:submit" />
 
         </fieldset>
       </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>
@@ -93,6 +167,8 @@
   <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.18/dist/sweetalert2.all.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/validate.js/0.13.1/validate.min.js"></script>
   <script src="./reset_pwd_email.js"></script>
+  <script type="text/javascript" src="static/lan.js"></script>
+  <script src="static/common.js"></script>
   <body>
 
 </div>

html/reset_pwd_email.js

@@ -1,4 +1,15 @@
 
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
 $(".sender").click(function () {
 
   var email = $("#in_email").val()
@@ -17,3 +28,71 @@ $(".sender").click(function () {
 xhr.send();
 
 });
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    for (var obj of loaded_data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function direct(id) {
+    location.href = `make_video.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }

html/script_eng.js

@@ -29,8 +29,6 @@ const btnLoginPage = document.querySelector('.btn-login');
 const btnUserProfile = document.querySelector('.btn-userProfile');
 const btnLogout = document.querySelector('.btn-logout');
 
-
-
 function loginControl() {
     btnLoginPage.style.display = 'none';
     btnLogout.style.display = 'block';

html/script_profiles.js

@@ -10,9 +10,9 @@ function getCookie(name) {
 
 function renderView() {
     let token = getCookie('jwt_token');
-    // if(!token) {
-    //     return;
-    // }
+    if(!token) {
+        return;
+     }
     // axios.defaults.withCredentials = false;
     axios({
         method: 'post',
@@ -24,6 +24,21 @@ function renderView() {
     }).then(res => {
         console.log(res.data);
         const userInfo = res.data;
+          if(userInfo.user_info.left_sec < 20){
+            Swal.fire({
+                title: "剩餘秒數不足",
+                text: '您的影片額度即將不足，加值以持續使用',
+                icon: 'warning',
+                showCancelButton: true,
+                cancelButtonText: 'Cancel',
+                confirmButtonColor: '#3085d6',
+                confirmButtonText: '加值'
+            }).then(result => {
+              if (result.isConfirmed) {
+                location.href = "pricing.html";
+              }
+            });
+          }
         // const str = `<img src="static/img/undraw_male_avatar_323b.svg" alt="">
         //     <p class="card-profile-txt">User Profile</p>
         //     <p class="card-profile-cnt">${userInfo.user_info.userName}</p>
@@ -55,14 +70,14 @@ function renderView() {
         // 使用者名稱
         const userName = `<h2 class="user-name text-white mt-4 fw-bold">Hello,${userInfo.user_info.userName}</h2>`;
         // 已使用
-        const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
+        const usedtime=`<h1 class="text-center">${userInfo.user_info.total_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         // 未使用
-        const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;">秒</span></h1>`;
+        const NotUsedTime=`<h1  class="text-center">${userInfo.user_info.left_sec}&ensp;<span style="font-size:15px;" set-lan="html:sec">秒</span></h1>`;
         // user資訊
         const infContent=`
         <div class="inf-content">
             <p>${userInfo.user_info.userName}</p>
-            <p>***************&nbsp;<a href="./reset_pwd_email.html">更改密碼</a></p>
+            <p>***************&nbsp;<a href="./reset_pwd_email.html" set-lan="html:resetPsd">更改密碼</a></p>
             <p>${userInfo.user_info.email}</p>
         </div>`;
         // 歷史紀錄
@@ -116,4 +131,72 @@ $(".historical-record").hide();
 $( ".check-history" ).click(function() {
   $(".historical-record").toggle();
   $(".arrowdown").toggleClass("arrowdoup");
-  });
+  });
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let token = getCookie('jwt_token');
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    for (var obj of loaded_data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+      boxTitle.setAttribute('onclick', `direct(${obj.id})`);
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.setAttribute('onclick', `direct(${obj.id})`);
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+function direct(id) {
+    location.href = `make_video.html?id=${id}`;
+}
+
+function view() {
+    event.stopPropagation();
+    console.log(event.target);
+    if (event.target.nodeName === 'I') {
+      return;
+    } else {
+      window.open(`http://${event.target.dataset.url}`, '_blank');
+    }
+  }

html/static/lan.js

@@ -18,13 +18,16 @@ function getCookie(name)
 }
 
 var zh = {
+    "logleftbox1": "將你的生活、創作 、宣傳做成影片",
+    "logleftbox2": "開始使用 AI Spokesgirl",
     "make_video" : "影片製作",
     "make_slides" : "投影影片製作",
     "make_video_long": "長影片製作",
+    "make_video_eng": "英文影片製作",
     "login" : "登入",
     "user_profile": "會員資料",
     "logout": "登出",
-    "en": "英文",
+    "en": "English",
     "zh": "中文",
     "choose_character": "選擇人物",
     "usage_intro": "使用說明",
@@ -41,7 +44,7 @@ var zh = {
     "sup_img_profile": "2. 影像連結檔案格式支援：",
     "submit_to_wait": "3. 點選“送出”之後需等待一段影片製作的時間，請您耐心等候，待製作完畢可於通知網址查看",
     "add_eng": "加入英文:",
-    "submut": "送出",
+    "submit": "送出",
     "privacy_term": "同意隱私政策及使用條款",
     "newHere": "還沒有帳號？",
     "goRegister": "註冊",
@@ -50,18 +53,52 @@ var zh = {
     "errorPsd": "密碼至少為4個字元",
     "used": "已使用",
     "left": "未使用",
-    "sec": "秒"
+    "sec": "秒",
+    "username": "帳號/用戶名稱",
+    "password": "密碼",
+    "resetPsd": "更改密碼",
+    "details": "查看詳情",
+    "refill": "我要加值",
+    "Createsthtoday": "今天要做甚麼影片呢?",
+    "date": "日期",
+    "video_duration": "影片時間",
+    "slide_link": "SLIDE 連結",
+    "new_pwd": "新密碼",
+    "confirm_pwd": "驗證碼",
+    "pricing_lan": "語言選擇: 中文 | 英文",
+    "pricing_avatars": "多款預設AI代言主播任你選",
+    "pricing_content": "畫面素材支援: 圖檔 | 影檔 | 簡報",
+    "pricing_discount": "限時優惠",
+    "pricing_checkout": "立即查看",
+    "mins": "分鐘",
+    "launch_special": "早鳥方案",
+    "index_li1_1": "支援中英文內容",
+    "index_li1_2": "可加入字幕",
+    "index_li2_1": "無人物肖像權問題",
+    "index_li2_2": "人物表情、動作自然",
+    "index_li2_3": "因應主題，選擇合適人物",
+    "index_li3_1": "可上傳圖片或是影片作為背景",
+    "index_li3_2": "可輸入文字腳本及投影片",
+    "index_action": "想要快速製作影音內容？立即註冊，開始創作！",
+    "follow_us": "關注我們",
+    "contact_name": "集仕多股份有限公司",
+    "address": "新竹縣竹北市復興二路229號9樓之9",
+    "contact_tel": "聯絡電話",
+    "contact_mail": "聯絡信箱"
 };
 
 var en = {
+    "logleftbox1": "Make your first video for promotion, creation and life today",
+    "logleftbox2": "Let's get started with AI Spokesgirl",
     "make_video" : "Make Videos",
     "make_slides" : "Make Videos By Slides",
     "make_video_long": "Make Long Videos",
+    "make_video_eng": "Make English Video",
     "login" : "Login",
     "user_profile": "User Profile",
     "logout": "Logout",
     "en": "English",
-    "zh": "Chinese",
+    "zh": "中文",
     "choose_character": "Choose Character",
     "usage_intro": "Usage Introduction",
     "history": "History",
@@ -77,7 +114,7 @@ var en = {
     "sup_img_profile": "2. Support File Format:",
     "submit_to_wait": "3. After Clicking Submit, You Will Need To Wait For A Period Of Time For The Production Of The Video. Please Wait Patiently. You Can Check It At The Notification URL When The Production Is Completed.",
     "add_eng": "Allow English Lines:",
-    "submut": "Submit",
+    "submit": "Submit",
     "privacy_term": "I Agree to privacy policy and terms of use.",
     "newHere": "New here?",
     "goRegister": "REGISTER",
@@ -86,7 +123,38 @@ var en = {
     "errorPsd": "Passwords must be at least 4 characters long.",
     "used": "Already Used",
     "left": "Left",
-    "sec": "Sec"
+    "sec": "Sec",
+    "username": "User Name",
+    "password": "password",
+    "resetPsd": "Reset Password",
+    "details": "Details",
+    "refill": "Refill",
+    "Createsthtoday": "Create something today!",
+    "date": "Date",
+    "video_duration": "Duration",
+    "slide_link": "SLIDE Link",
+    "new_pwd": "New Password",
+    "confirm_pwd": "Confirmation Code",
+    "pricing_lan": "Language Options: Ch | Eng",
+    "pricing_avatars": "Over 6 Avatars Available",
+    "pricing_content": "You can upload: images, MP4, slides",
+    "pricing_discount": "Special Discount",
+    "pricing_checkout": "Check it out",
+    "mins": "Minutes",
+    "launch_special": "Launch special",
+    "index_li1_1": "Support english & chinese content",
+    "index_li1_2": "Caption included",
+    "index_li2_1": "Free of portrait rights",
+    "index_li2_2": "Natural facial expression",
+    "index_li2_3": "Choose built-in avatars for your need",
+    "index_li3_1": "Generate videos from text",
+    "index_li3_2": "Upload images, video, slides as backgrounds",
+    "index_action": "Want to make video faster? Sign up to start creating!",
+    "follow_us": "Follow us",
+    "contact_name": "Choozmo Inc.",
+    "address": "Rm. 9, 9F., No. 229, Fuxing 2nd Rd., Zhubei City, Hsinchu County 302052, Taiwan (R.O.C.)",
+    "contact_tel": "Tel",
+    "contact_mail": "Email"
 };
 
 
@@ -178,5 +246,8 @@ function get_lan(m)
 
 // 預設中文版
 var lan = getCookie('lan');
+
+if(lan) {
+    changeLan(lan);
+}
 console.log(`目前語言版本: ${lan}`);
-changeLan('zh');

html/static/script_slides.js

@@ -0,0 +1,264 @@
+checkRoute();
+
+function checkRoute() {
+  let jwt_token = get_jwt_token();
+  if(jwt_token == undefined) {
+    window.location.replace("login.html");
+  }
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/user_profile',
+    headers: { 
+        'accept': 'text/html',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    if(res.status !== 200) {
+      window.location.replace("login.html");
+    }
+    var userName='';
+    userName+=' <h2 class="user-name text-white mt-4 fw-bold">Hello,'+res.data.user_info.userName+'</h2>';
+    $('.userName').html(userName);
+  }).catch(err => {
+    console.log(err);
+  });
+}
+
+const btnLoginPage = document.querySelector('.btn-login');
+const btnUserProfile = document.querySelector('.btn-userProfile');
+const btnLogout = document.querySelector('.btn-logout');
+function loginControl() {
+  btnLoginPage.style.display = 'none';
+  btnLogout.style.display = 'block';
+  btnUserProfile.style.display = 'block';
+}
+
+loginControl();
+
+var client_id = Date.now()
+var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
+var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
+  return new bootstrap.Tooltip(tooltipTriggerEl)
+});
+var myModal = new bootstrap.Modal(document.getElementById('history'), {
+  keyboard: false
+})
+var avatarModal = new bootstrap.Modal(document.getElementById('avatarmega'), {
+  keyboard: false
+})
+var modalImg = document.querySelector("#avatarmega .modal-img");
+var modalTitle = document.querySelector("#avatarmega .modal-title");
+var avatarSelector = document.getElementById("avatar");
+var card = document.getElementsByClassName('card');
+card = [...card];
+avatarSelector.addEventListener('change', avatarChange);
+avatarChange();
+
+function addCardListener() {
+  for (let i = 0; i < card.length; i++) {
+    card[i].addEventListener('click', openavatarModel);
+  }
+}
+
+addCardListener();
+
+function avatarChange() {
+  var value = avatarSelector.options[avatarSelector.selectedIndex].text;
+  $('.owl-carousel').trigger('to.owl.carousel', avatarSelector.selectedIndex);
+  for (let i = 0; i < card.length; i++) {
+    card[i].classList.remove('active');
+    if (card[i].dataset.avatar == value) {
+      card[i].classList.add('active');
+    }
+  }
+}
+
+function openavatarModel() {
+  console.log(this.dataset.img);
+  modalImg.setAttribute("src", `static/img/${this.dataset.img}.webp`);
+  modalTitle.textContent = `${this.dataset.avatar}`;
+  avatarModal.show();
+}
+
+$('input[type=file]').on('change', prepareUpload);
+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);
+  $(this).next().text('');
+  $(this).next().html('<img src="static/img/Spinner-1s-181px.gif">');
+  $.ajax({
+    type: 'POST',
+    processData: false, // important
+    contentType: false, // important
+    data: data,
+    url: 'https://www.choozmo.com:8887/uploadfile',
+    dataType: 'json',
+    success: function (jsonData) {
+      event.target.previousSibling.value = jsonData.msg;
+      $(this).prev().val(jsonData.msg);
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      //console.log($(this).next());
+      //$(this).next().html('上傳檔案');
+      //$(this).next().text('上傳檔案');
+    },
+    error: function (error) {
+      event.target.nextSibling.innerHTML = '';
+      event.target.nextSibling.textContent = '上傳檔案';
+      alert('圖片錯誤');
+    }
+  });
+}
+
+const slide_button = document.querySelector('#send_slide');
+$("#send_slide").click(function () {
+  slide_button.setAttribute('disabled', '');
+  setTimeout(function () {
+    slide_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", "https://www.choozmo.com:8887/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);
+});
+
+var loaded_data = ''
+function openNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+  document.querySelector('.loader').style.display = "block";
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    console.log(res.data);
+    loaded_data = res.data;
+    for (var obj of loaded_data) {
+      var historyList = document.querySelector('.historyList');
+      var list = document.createElement('li');
+      list.id = obj.id;
+      // div-imgfr
+      var divImgfr = document.createElement('div');
+      divImgfr.classList.add('item_imgfr');
+      var img = document.createElement('img');
+      img.setAttribute('src', obj['image_urls'][0]);
+      divImgfr.appendChild(img);
+      // div-content
+      var contentBox = document.createElement('div');
+      contentBox.classList.add('content-box');
+      var boxTitle = document.createElement('p');
+      boxTitle.classList.add('box-title');
+      boxTitle.textContent = obj.name;
+      boxTitle.id = obj.id;
+
+      var boxLink = document.createElement('span');
+      boxLink.classList.add('box-link');
+      boxLink.setAttribute("data-url", obj.link);
+      boxLink.setAttribute('onclick', 'view()');
+      boxLink.innerHTML = '<i class="fas fa-play-circle me-1"></i>觀看影片';
+      contentBox.appendChild(boxTitle);
+      contentBox.appendChild(boxLink);
+      list.classList.add("historyList-item");
+      list.appendChild(divImgfr);
+      list.appendChild(contentBox);
+      historyList.appendChild(list);
+    }
+    document.querySelector('.loader').style.display = "none";
+  
+  }).catch(err => {
+    console.log(err);
+  });
+}
+function closeNav() {
+  document.getElementById("mySidenav").style.width = "250px";
+}
+
+function view() {
+  event.stopPropagation();
+  console.log(event.target);
+  if (event.target.nodeName === 'I') {
+    return;
+  } else {
+    window.open(`http://${event.target.dataset.url}`, '_blank');
+  }
+}
+
+function renderXHR_data(jsonObj) {
+  XHRstring = ''
+  for (const [key, value] of Object.entries(jsonObj)) {
+    console.log(value)
+    if (typeof (value) == "object") {
+      XHRstring += (key+'=['+value.join(',')+']&')
+    }
+    else {
+      XHRstring += (key + '=' + value + '&')
+    }
+  }
+  XHRstring = XHRstring.substring(0, XHRstring.length - 1);
+  return XHRstring
+}
+
+function get_jwt_token(){
+  jwt_raw = document.cookie.split(';').filter(s=>s.includes('jwt_token'))[0];
+  if(!jwt_raw) {return}
+  return jwt_raw.split('=')[1];
+}
+
+ getpathId();
+
+function getpathId() {
+  id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+  //load_data(id);
+}
+getData();
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
+

html/static/script_util.js

@@ -323,7 +323,7 @@ function openNav() {
       boxTitle.classList.add('box-title');
       boxTitle.textContent = obj.name;
       boxTitle.id = obj.id;
-      boxTitle.setAttribute('onclick', 'load_data()');
+      boxTitle.setAttribute('onclick', `load_data(${obj.id})`);
 
       var boxLink = document.createElement('span');
       boxLink.classList.add('box-link');
@@ -333,7 +333,7 @@ function openNav() {
       contentBox.appendChild(boxTitle);
       contentBox.appendChild(boxLink);
       list.classList.add("historyList-item");
-      list.setAttribute('onclick', 'load_data()');
+      list.setAttribute('onclick', `load_data(${obj.id})`);
       list.appendChild(divImgfr);
       list.appendChild(contentBox);
       historyList.appendChild(list);
@@ -379,13 +379,13 @@ function get_jwt_token(){
   return jwt_raw.split('=')[1];
 }
 
-function load_data() {
+function load_data(tid, loaded_data) {
+  if(!tid) {
+    return;
+  }
   var title = document.getElementById("title");
   var linker = document.getElementById("linker");
-
   myModal.hide()
-  tid = event.srcElement.id
-  console.log(tid);
   linker.setAttribute('href', `http://${loaded_data.find(item => item.id == tid).link}`)
   linker.setAttribute('target', '_blank')
   $("#linker").html(`http://${loaded_data.find(item => item.id == tid).link}`)
@@ -433,6 +433,34 @@ function load_data() {
 
 }
 
+ getpathId();
+
+function getpathId() {
+  id = window.location.search.split('?').pop();
+  return id.split('=')[1];
+  //load_data(id);
+}
+getData();
+
+function getData() {
+  let jwt_token = get_jwt_token();
+  axios({
+    method: 'post',
+    url: 'https://www.choozmo.com:8887/history_input',
+    headers: { 
+        'accept': 'application/json',
+        'Authorization': `Bearer ${jwt_token}`
+     }
+  }).then(res => {
+    loaded_data = res.data;
+    console.log(loaded_data);
+    const id = getpathId();
+    load_data(id, loaded_data);
+  }).catch(err => {
+    console.log(err);
+  });
+} 
+
 var subtitleInputs = document.querySelector(".subtitle-inputs");
 var imgInputs = document.querySelector(".img-inputs");
 let length = 5;
@@ -518,13 +546,4 @@ $('.owl-carousel').owlCarousel({
   }
 });
 
-// $.ajax({
-//   method: "GET",
-//   url: "http://www.choozmo.com:8887/user_profile",
-//   dataType: "json",
-// })
-// .done(function(msg){
-//     console,log(msg);
-// })
-
 

html/user_profile2.html

@@ -79,11 +79,15 @@
             </div>
             <div class="userName"></div> 
             <img class="user img-fluid rounded-circle" src="./static/img/contactus/man.jpg" alt="">
-            <p class="text-white my-3 text-center">今天要做甚麼影片呢?</p>
+            <p class="text-white my-3 text-center" set-lan="html:Createsthtoday">今天要做甚麼影片呢?</p>
             <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
                 <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video.html" set-lan="html:make_video">影片製作</a>
                 <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_slide.html" set-lan="html:make_slides">投影片影片製作</a>
             </div>
+            <div class="navbar-nav mb-2 mb-lg-0 px-3 pe-4">
+                <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./index_eng.html" set-lan="html:make_video_eng">英文影片製作</a>
+                <a class="nav-link btn-gocreate text-white col-6" aria-current="page" href="./make_video_long.html" set-lan="html:make_video_long">長影片製作</a>
+            </div>
             <hr>
             <ul class="nav-list ps-0">
                 <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal" data-bs-target="#howto"><i
@@ -93,7 +97,7 @@
                 <a style="text-decoration: none;color:white;" href="./user_profile2.html">
                     <li class="nav-list-item pb-1 mb-3" data-bs-toggle="modal">
                         <i class="fas fa-user me-2"></i>
-                       <lan set-lan="user_profile">會員資料</lan>
+                       <lan set-lan="html:user_profile">會員資料</lan>
                     </li>
                 </a>
                 <li class="nav-list-item pb-1" data-bs-toggle="modal" data-bs-target="#history" onclick="openNav()">
@@ -127,8 +131,8 @@
                     <div class="information">
                         <div class="row px-0 mx-0 mt-4">
                             <div style="letter-spacing: 3px;" class="col-lg-4">
-                                <p class="text-end">帳號/用戶名稱:</p>
-                                <P class="text-end">密碼:</P>
+                                <p class="text-end" set-lan="html:username">帳號/用戶名稱:</p>
+                                <P class="text-end" set-lan="html:password">密碼:</P>
                                 <p class="text-end">Email:</p>
                             </div>
                             <div class="userinf col-lg-8">
@@ -141,20 +145,20 @@
                             <div class="row px-0 mx-0 g-4">
                                 <div class="Used col-lg-6">
                                     <div class="card py-4 ps-4">
-                                        <p class="fw-bold">已使用</p>
+                                        <p class="fw-bold" set-lan="html:used">已使用</p>
                                         <div class="used-time">
                                             <!-- <h1 class="text-center">324&ensp;<span style="font-size:15px;">秒</span></h1> -->
                                         </div>
-                                        <p style="color:#183790;" class="check-history mb-0 text-center"><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt="">查看詳情</p>
+                                        <p style="color:#183790;" class="check-history mb-0 text-center"><img width="20" class="arrowdown me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-arrow-dropdown-circle.png" alt=""><lan set-lan="html:details"></lan></p>
                                     </div>
                                 </div>
                                 <div class="not-used col-lg-6">
                                     <div class="card py-4 ps-4">
-                                        <p class="fw-bold">未使用</p>
+                                        <p class="fw-bold" set-lan="html:left">未使用</p>
                                         <div class="not-used-time">
                                             <!-- <h1  class="text-center">144&ensp;<span style="font-size:15px;">秒</span></h1> -->
                                         </div>
-                                       <a style="text-decoration: none;" href="./pricing.html"><p style="color:#183790;" class="mb-0 text-center"><img width="20" class="me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-add-circle.png" alt="">我要加值</p></a>
+                                       <a style="text-decoration: none;" href="./pricing.html"><p style="color:#183790;" class="mb-0 text-center"><img width="20" class="me-2 mb-1" src="./static/img/userprofile/Icon ionic-md-add-circle.png" alt=""><lan set-lan="html:refill"></lan></p></a>
                                     </div>
                                 </div>
                                 <div class="historical-record col-lg-12">
@@ -162,9 +166,9 @@
                                         <table class="table text-center">
                                             <thead>
                                               <tr>
-                                                <th scope="col">日期</th>
-                                                <th scope="col">標題</th>
-                                                <th class="px-0" scope="col">影片時間</th>
+                                                <th scope="col" set-lan="html:date">日期</th>
+                                                <th scope="col" set-lan="html:video_title">標題</th>
+                                                <th class="px-0" scope="col" set-lan="html:video_duration">影片時間</th>
                                               </tr>
                                             </thead>
                                             <tbody class="historical-content">