Update static/demo/index.html

static/demo/index.html

@@ -76,12 +76,15 @@
         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 ;
@@ -110,6 +113,7 @@
                     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++ ){
@@ -124,6 +128,7 @@
                     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
@@ -136,24 +141,30 @@
                     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})`)
@@ -165,6 +176,7 @@
                     .attr("fill", "currentColor")
                     .attr("text-anchor", "end")
                     .text("Semantic dimension 1"));
+
             svg.append("g")
                 .attr("transform", `translate(${marginLeft},0)`)
                 .call(d3.axisLeft(y))
@@ -175,6 +187,7 @@
                     .attr("fill", "currentColor")
                     .attr("text-anchor", "start")
                     .text("Semantic dimension 2"));
+
             // Create the grid.
             svg.append("g")
                 .attr("stroke", "#cccccc")
@@ -195,6 +208,7 @@
                     .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)
@@ -207,6 +221,7 @@
                 .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")
@@ -246,6 +261,7 @@
                             .duration(50)
                             .style("opacity", 0);
                 });
+
             // Adding edges
             svg.append("g")
                 .selectAll("line")
@@ -258,14 +274,18 @@
                 .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" )
@@ -273,6 +293,7 @@
             $( "#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" ){
@@ -282,6 +303,7 @@
                 $( "#prompt" ).val( $( "#prompt" ).val().replace( " " + p, "" ) ) ;
             }
         }
+
         // Remove adversarial sentences from prompt
         function remove_recommendation( p ){
             $( "#prompt" ).val( $( "#prompt" ).val().replace( p, "" ) ) ;
@@ -289,6 +311,7 @@
             $( "#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" ){
@@ -299,8 +322,10 @@
                 $( "#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" ) ;
@@ -308,21 +333,25 @@
             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 ){
@@ -335,6 +364,7 @@
                                 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++ ){
@@ -347,16 +377,19 @@
                                 }
                             }
                         }
+
                         // 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" ) ;
@@ -372,6 +405,7 @@
                     }
                     setTimeout( loading_animation, 500 );
                 } )()
+
                 $.ajax({
                     url: encodeURI("/demo_inference?prompt=" + $("#prompt").val()),
                     dataType: 'json',
@@ -381,15 +415,18 @@
                         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(){
@@ -406,10 +443,11 @@
                         $( "#outcome" ).val(out);
                     }
                 })
+
             // Returning false so the form keeps user in the same page
             return false;
         });
     </script>
     <!-- <script src="https://unpkg.com/carbon-components/scripts/carbon-components.min.js"></script> -->
 </body>
-</html>
+</html>