Update static/demo/index.html

static/demo/index.html

@@ -5,9 +5,10 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css">
-    <script type="text/javascript" src="js/track.js"></script>
     <script type="text/javascript" src="static/demo/js/d3.v7.min.js"></script>
-  
+    <script type="text/javascript" src="static/demo/js/jquery-3.7.1.min.js"></script>
+    <!-- <script type="text/javascript" src="js/d3.v7.min.js"></script>
+    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script> -->
     <style type="text/css">
         div.tooltip {
             position: absolute;
@@ -66,7 +67,7 @@
             </div>
         </div>
     </div>
-    <script type="text/javascript" src="static/demo/js/jquery-3.7.1.min.js"></script> 
+    <script src="./js/jquery-3.7.1.min.js"></script>
     <script lang="javascript">
         const width = 600;
         const height = 200;
@@ -75,15 +76,12 @@
         const marginBottom = 30;
         const marginLeft = 30;
         const nodeRadius = 3;
-
         const svg = d3.select("#graph").append("svg")
             .attr("viewBox", [0, 0, width, height])
             .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;");
-
         var tooltip = d3.select("body").append("div")
             .attr("class", "tooltip")
             .style("opacity", 0);
-
         const renderGraph = (recommendations) => {
             if( !recommendations ){
                 return ;
@@ -112,7 +110,6 @@
                     graphData.edges.push({ source: (i-1), target: i, type: 'input' });
                 }
             }
-
             // Adding nodes & edges for inclusion recommendations
             if( recommendations['add'].length > 0 ){
                 for( j = 0; j < recommendations['add'].length; j++ ){
@@ -127,7 +124,6 @@
                     graphData.edges.push({ source: (i-1), target: (i+j+1), type: 'add' });
                 }
             }
-
             // Adding nodes & edges for removal recommendations
             if( recommendations['remove'].length > 0 ){
                 // Showing only the first removal recommendation
@@ -140,30 +136,24 @@
                     type: 'remove'
                 });
             }
-
             // Convert edge references to actual node objects
             graphData.edges = graphData.edges.map(edge => ({
                 source: graphData.nodes.find(n => n.id === edge.source),
                 target: graphData.nodes.find(n => n.id === edge.target)
             }));
-
             const { nodes, edges } = graphData;
-
             // Prepare the ranges of values for the axes
             const xDomain = d3.extent(nodes, d => d.x);
             const yDomain = d3.extent(nodes, d => d.y);
             const xPadding = 2
             const yPadding = 2
-
             // Prepare the scales for positional encoding.
             const x = d3.scaleLinear()
                 .domain([xDomain[0]-xPadding,xDomain[1]+xPadding]).nice()
                 .range([marginLeft, width - marginRight]);
-
             const y = d3.scaleLinear()
                 .domain([yDomain[0]-yPadding,yDomain[1]+yPadding]).nice()
                 .range([height - marginBottom, marginTop]);
-
             // Create the axes.
             svg.append("g")
                 .attr("transform", `translate(0,${height - marginBottom})`)
@@ -175,7 +165,6 @@
                     .attr("fill", "currentColor")
                     .attr("text-anchor", "end")
                     .text("Semantic dimension 1"));
-
             svg.append("g")
                 .attr("transform", `translate(${marginLeft},0)`)
                 .call(d3.axisLeft(y))
@@ -186,7 +175,6 @@
                     .attr("fill", "currentColor")
                     .attr("text-anchor", "start")
                     .text("Semantic dimension 2"));
-
             // Create the grid.
             svg.append("g")
                 .attr("stroke", "#cccccc")
@@ -207,7 +195,6 @@
                     .attr("y2", d => 0.5 + y(d))
                     .attr("x1", marginLeft)
                     .attr("x2", width - marginRight));
-
             // Add a layer of dots.
             svg.append("g")
                 .attr("stroke-width", 2.5)
@@ -220,7 +207,6 @@
                 .attr("cx", d => x(d.x))
                 .attr("cy", d => y(d.y))
                 .attr("r", nodeRadius);
-
             // Add a layer of labels.
             svg.append("g")
                 .attr("font-family", "sans-serif")
@@ -260,7 +246,6 @@
                             .duration(50)
                             .style("opacity", 0);
                 });
-
             // Adding edges
             svg.append("g")
                 .selectAll("line")
@@ -273,18 +258,14 @@
                 .attr("x2", d => x(d.target.x)+(d.source.x>d.target.x?1.3*nodeRadius:nodeRadius*-1.3))
                 .attr("y2", d => y(d.target.y))
                 .style("stroke-dasharray", d => d.target.type == "add" ? "3,3" : "");
-
         };
-
         // ------------------------------------------------
-
         // Init state
         if( $( "#prompt" ).val() == "" ){
             $( "#generate" ).attr( "disabled", true ) ;
         }
         var last_request = Date.now() - 60 * 60 * 1000 ;
         var last_prompt = $( "#prompt" ).val().trim() ;
-
         // Add recommendations to the prompt
         function add_recommendation( p ){
             preview_add_recommendation( p, "hide" )
@@ -292,7 +273,6 @@
             $( "#recommendation" ).html( "" ) ;
             $( "#prompt" ).trigger( "keyup" ) ; // Looking for recommendations after accepting a recommendation
         }
-
         // Preview for add recommendation
         function preview_add_recommendation( p, flag ){
             if( flag == "show" ){
@@ -302,7 +282,6 @@
                 $( "#prompt" ).val( $( "#prompt" ).val().replace( " " + p, "" ) ) ;
             }
         }
-
         // Remove adversarial sentences from prompt
         function remove_recommendation( p ){
             $( "#prompt" ).val( $( "#prompt" ).val().replace( p, "" ) ) ;
@@ -310,7 +289,6 @@
             $( "#recommendation" ).html( "" ) ;
             $( "#prompt" ).trigger( "keyup" ) ; // Looking for recommendations after accepting a recommendation
         }
-
         // Preview for add recommendation
         function preview_remove_recommendation( p, flag ){
             if( flag == "show" ){
@@ -321,10 +299,8 @@
                 $( "#prompt" ).val( $( "#prompt" ).data( "previous_prompt" ) ) ;
             }
         }
-
         // Listening to changes performed on the prompt input field
         $( "#prompt" ).on( "keyup", function( e ){
-
             // Updating the generate button state based on prompt length
             if( $( "#prompt" ).val().length > 0 ){
                 $( "#generate" ).removeAttr( "disabled" ) ;
@@ -332,25 +308,21 @@
             else{
                 $( "#generate" ).attr( "disabled", true ) ;
             }
-
             // Minimum timeout between the requests
             if( Date.now() - last_request > 500 && last_prompt != $( "#prompt" ).val().trim() ){
                 last_request = Date.now() ;
                 last_prompt = $( "#prompt" ).val().trim() ;
                 // Getting the last typed char
                 var last_char = $( "#prompt" ).val().trim().slice( -1 ) ;
-
                 // Triggering the API request when ending of a sentence is found, e.g., .?!
                 if( last_char == "." || last_char == "?" || last_char == "!" ){
                     $( "#recommendation" ).html( 'Requesting recommendations: <div class="bx--tag bx--tag--gray bx--tag--deletable">...</div>' ) ;
                     var api_url = "/recommend?prompt="
                     // var api_url = "/recommend_local?prompt="
                     var p = $( "#prompt" ).val() ;
-
                     // API request
                     $.getJSON( api_url + encodeURI( p ), function( data ) {
                         $( "#recommendation" ).html( "Recommendations: " ) ;
-
                         // Looking first for removal recommendations
                         // if( data["remove"].length > 0 && data["remove"][0].similarity > 0.5 ){
                         if( data["remove"].length > 0 ){
@@ -363,7 +335,6 @@
                                 break ; // Showing only once removal recommendation at a time
                             }
                         }
-
                         // else if( data["add"].length > 0 ){ // After the removal recommendations are dealt with, then we show recommendations for inclusion
                         if( data["add"].length > 0 ){ // Think Demo UX
                             for( var i = 0; i < data["add"].length; i++ ){
@@ -376,19 +347,16 @@
                                 }
                             }
                         }
-
                         // User status message about recommendations found
                         if( data["add"].length == 0 && data["remove"].length == 0 ){
                             $( "#recommendation" ).html( "No recommendations found." ) ;
                         }
-
                         $("#prompt").data( "recommendations", data );
                         // renderGraph(data);
                     });
                 }
             }
         });
-
         // Generation request
         $( "#demo" ).on( "submit", function(e){ // Hugging Face
                 $( "#generate" ).toggleClass( "bx--btn--disabled" ) ;
@@ -404,7 +372,6 @@
                     }
                     setTimeout( loading_animation, 500 );
                 } )()
-
                 $.ajax({
                     url: encodeURI("/demo_inference?prompt=" + $("#prompt").val()),
                     dataType: 'json',
@@ -414,18 +381,15 @@
                         console.log(data)
                         // Resetting the status of the button
                         $( "#generate" ).toggleClass( "bx--btn--disabled" ) ;
-
                         // Clearing the previous timeout
                         if( $( "#demo" ).data( "timeoutId" ) != "" ){
                             clearTimeout( $( "#demo" ).data( "timeoutId" ) );
                             $( "#demo" ).data( "timeoutId", "" ) ;
                         }
-
                         out = data.content.split("");
                         model_id = data.model_id;
                         temperature = data.temperature
                         max_new_tokens = data.max_new_tokens
-
                         $( "#outcome" ).append( "\n\n+ ------------------------------------\n| Model: " + model_id + "\n| Temperature: " + temperature + "\n| Max new tokens: " + max_new_tokens + "\n+ ------------------------------------\n\n" ) ;
                         // Animating the generated output
                         ( function typing_animation(){
@@ -448,4 +412,4 @@
     </script>
     <!-- <script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script> -->
 </body>
-</html>
+</html>