choozmo
/
AI_anchor_openshot


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AI ANCHOR GO</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp"
    crossorigin="anonymous">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
  <link rel="stylesheet" href="style.css">
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    body {
      font-family: "Lato", sans-serif;
    }
    
    .sidenav {
      height: 100%;
      width: 0;
      position: fixed;
      z-index: 1;
      top: 0;
      left: 0;
      background-color: #111;
      overflow-x: hidden;
      transition: 0.5s;
      padding-top: 60px;
    }
    
    .sidenav a {
      padding: 8px 8px 8px 32px;
      text-decoration: none;
      font-size: 25px;
      color: #818181;
      display: block;
      transition: 0.3s;
    }
    
    .sidenav a:hover {
      color: #f1f1f1;
    }
    
    .sidenav .closebtn {
      position: absolute;
      top: 0;
      right: 25px;
      font-size: 36px;
      margin-left: 50px;
    }
    
    @media screen and (max-height: 450px) {
      .sidenav {padding-top: 15px;}
      .sidenav a {font-size: 18px;}
    }
    </style>
</head>
<body>
  <div class="container">
    <div id="mySidenav" class="sidenav">
      <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
    </div>
    <form action="/step_questions/submit" method="post" id="msform">
      <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; 過去紀錄</span>
      <div>
        
      
      </div>
      <!-- fieldsets -->
      <fieldset>
        <h2 class="fs-title">AI ANCHOR</h2>
        <h3  class="fs-subtitle">標題</h3>
        <input id=title type="text" name='t1' class='title_new' value="" placeholder="1" /> <br/>
        <h3  class="fs-subtitle">選擇人物</h3>
        <select id="avatar" class='avatar'>
        <option value="6">Angus</option>
        <option value="7">Peggy</option>
      </select>
        <h3 class="fs-subtitle">台詞</h3>
        <input type="text" name='t1' class='txtsrc1' value="" placeholder="1" /> <br/>
        <input type="text" name='t2' class='txtsrc2' value="" placeholder="2" /><br/>
        <input type="text" name='t3' class='txtsrc3' value="" placeholder="3" /><br/>
        <input type="text" name='t4'  class='txtsrc4' value="" placeholder="4" /><br/>
        <input type="text" name='t5' class='txtsrc5' value="" placeholder="5" /><br/>
        <input type="text" name='t6' class='txtsrc6' value="" placeholder="6" /><br/>
        <input type="text" name='t7' class='txtsrc7' value="" placeholder="7" /><br/>
        <input type="text" name='t8' class='txtsrc8' value="" placeholder="8" /><br/>
        <input type="text" name='t9' class='txtsrc9' value="" placeholder="9" /><br/>
        <input type="text" name='t10' class='txtsrc10' value="" placeholder="10" /><br/>
        <h3 class="fs-subtitle">影像連結</h3>
        <input type="text" name='m1' class='imgsrc1' value="" placeholder="1" /> <br/>
        <input type="text" name='m2' class='imgsrc2' value="" placeholder="2" /><br/>
        <input type="text" name='m3' class='imgsrc3' value="" placeholder="3" /><br/>
        <input type="text" name='m4' class='imgsrc4' value="" placeholder="4" /><br/>
        <input type="text" name='m5' class='imgsrc5' value="" placeholder="5" /><br/>
        <input type="text" name='m6' class='imgsrc6' value="" placeholder="6" /><br/>
        <input type="text" name='m7' class='imgsrc7' value="" placeholder="7" /><br/>
        <input type="text" name='m8' class='imgsrc8' value="" placeholder="8" /><br/>
        <input type="text" name='m9' class='imgsrc9' value="" placeholder="9" /><br/>
        <input type="text" name='m10' class='imgsrc10' value="" placeholder="10" /><br/>
        <input id="checker" type="button" name="next" class="next action-button" value="送出" />
        <div>
        <h3 class="fs-subtitle">處理進度</h3>
        <div id="myProgress">
          
          <div id="myBar">0%</div>
        </div>
      </fieldset>
    </form>
        
    
  </div>
  
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
  <script src="script_msg.js"></script>
  <script>
    var loaded_data = ''
    function openNav() {
      document.getElementById("mySidenav").style.width = "250px";
  
        $.get("http://www.choozmo.com:8888/history_input", function(data, status){
            console.log(data)
            loaded_data = data
            for (var obj of data) {
              var sideBAR = document.getElementById('mySidenav')
              var message = document.createElement('a')
              var content = document.createTextNode(obj.name)
              message.id = obj.id
              message.setAttribute('href', "#")
              message.setAttribute('onclick', "load_data()")
              message.appendChild(content)
              sideBAR.appendChild(message)
            }
            
          });
    
    }
    
    function closeNav() {
      document.getElementById("mySidenav").style.width = "0";
    }
    function load_data(){
      var title = document.getElementById("title")
      tid = event.srcElement.id
      console.log(tid);
      $(".title_new").val(loaded_data.find(item => item.id == tid).name)
      var step;
      for (step = 1; step <= 10; step++) {
        $(".txtsrc"+step).val(loaded_data.find(item => item.id == tid).text_content[step-1]) 
      }
      var step2;
      for (step2 = 1; step2 <= 10; step2++) {
        $(".imgsrc"+step2).val(loaded_data.find(item => item.id == tid).image_urls[step2-1]) 
      }
      
    }
    
    </script>
  <style>
    #myProgress {
      width: 100%;
      background-color: #ddd;
    }
    
    #myBar {
      width: 10%;
      height: 30px;
      background-color: #04AA6D;
      text-align: center;
      line-height: 30px;
      color: white;
    }
    </style>
  <body>
      
      <ul id='messages'>
      </ul>
      <script>
          var ws = new WebSocket('ws://www.choozmo.com:8888/progress');
          ws.onmessage = function(event) {
              console.log(event.data);
              var elem = document.getElementById("myBar");
              elem.style.width = event.data + "%";
              elem.innerHTML = event.data  + "%";
          };
          function sendMessage(event) {
              var input = document.getElementById("messageText")
              ws.send(input.value)
              input.value = ''
              event.preventDefault()
          }
      </script>


</div>

</body>
</html>