index.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <meta http-equiv="X-UA-Compatible" content="IE=9">
   5 <meta charset="UTF-8">
   6 <title>AI004</title>
   7 <style type="text/css">
   8         h1, h2, h3 {
   9                 margin:0px;
  10         }
  11         body, textarea {
  12                 font-family: Consolas, 'Courier New', Courier, Monaco, monospace;
  13                 font-size: 14px;
  14                 line-height: 1.2;
  15         }
  16 </style>
  17 <script type="text/javascript" src="./header.js" charset="UTF-8"></script>
  18 <script type="text/javascript">
  19 var mainAI = null;
  20 var inputBoxObj = null;
  21 onload = function() {
  22         mainAI = new AI(document.getElementById("messageBox"), document.getElementById("debugBox"));
  23         inputBoxObj = document.getElementById("inputBox");
  24         inputBoxObj.onkeydown = sendToAI;
  25         mainAI.downloadBox = document.getElementById("downloadBox");
  26         // Setup the dnd listeners.
  27         var dropZone = document.getElementById('inputBox');
  28         dropZone.addEventListener('dragover', handleDragOver, false);
  29         dropZone.addEventListener('drop', handleFileSelect, false);
  30 }
  31
  32 function sendToAI(e){
  33         //Enterで送信
  34         //Shift+Enterで改行
  35         if (e.keyCode == 13){ // Enterが押された
  36                 if(!e.shiftKey/* && inputBoxObj.value.replace(/\s/g, "").length > 0*/){
  37                         e.preventDefault();
  38                         mainAI.sendToAI(inputBoxObj.value, "User");
  39                         inputBoxObj.value = '';
  40                 }
  41         }
  42 }
  43
  44 // http://www.html5rocks.com/ja/tutorials/file/dndfiles/
  45 function handleFileSelect(evt){
  46         evt.stopPropagation();
  47         evt.preventDefault();
  48
  49         var files = evt.dataTransfer.files; // FileList object.
  50
  51         // files is a FileList of File objects. List some properties.
  52         var output = [];
  53         for(var i = 0, f; f = files[i]; i++){
  54                 var r = new FileReader();
  55                 r.onload = (function(file){
  56                         return function(e){
  57                                 mainAI.sendTextFromFileToAI(r.result, file.name, file.lastModifiedDate, "File");
  58                         }
  59                 })(f);
  60                 r.readAsText(f);
  61         }
  62 }
  63
  64 function handleDragOver(evt){
  65         evt.stopPropagation();
  66         evt.preventDefault();
  67         evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  68 }
  69
  70
  71 </script>
  72 </head>
  73 <body>
  74 <h1>AI004</h1>
  75 <div style="float:left;">
  76         <h2>Message</h2>
  77         <textarea id="messageBox" cols="64" rows="32"></textarea>
  78 </div>
  79 <div style="float:left;">
  80         <h2>Debug</h2>
  81         <textarea id="debugBox" cols="64" rows="24"></textarea>
  82         <h2>Downloads</h2>
  83         <div id="downloadBox"></div>
  84 </div>
  85 <div style="clear:both;">
  86         <h2>Input</h2>
  87         <form onsubmit="return false;">
  88                 <textarea id="inputBox" cols="128" rows="8"></textarea>
  89         </form>
  90 </div>
  91 </body>
  92 </html>