resapi-multiturn

Sleeping

App Files Files Community

ashwath-vaithina-ibm commited on Jun 4

Commit

a4e21c7

verified ·

1 Parent(s): 6c43dbf

updated CSS

Browse files

Files changed (1) hide show

static/demo/index.html +796 -776

static/demo/index.html CHANGED Viewed

@@ -1,804 +1,824 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8" />
-  <meta name="viewport" content="width=device-width, initial-scale=1" />
-  <title>Responsible Prompting – Multi‐Turn Chat + Graph</title>
-  <!-- Carbon CSS (for tabs and tags) -->
-  <link
-    rel="stylesheet"
-    href="https://unpkg.com/carbon-components/css/carbon-components.min.css"
-  />
-  <style>
-    /* ---------- Overall Layout ---------- */
-    html,
-    body {
-      margin: 0;
-      padding: 0;
-      height: 100vh;
-      font-family: "IBM Plex Sans", sans-serif;
-    }
-    body {
-      display: flex;
-      flex-direction: column;
-    }
-    /* Container for the header (title + tabs) */
-    .header-container {
-      background: white;
-      padding: 1rem;
-      border-bottom: 1px solid #ddd;
-    }
-    .bx--tabs__nav {
-      display: flex;
-      list-style: none;
-      padding: 0;
-      margin: 0;
-      border-bottom: 2px solid #c6c6c6;
-    }
-    .bx--tabs__nav-item {
-      margin-right: 1rem;
-      padding: 0.5rem 0.75rem;
-      cursor: pointer;
-      font-size: 1rem;
-      color: #393939;
-      border-bottom: 2px solid transparent;
-    }
-    .bx--tabs__nav-item--selected {
-      color: #0f62fe;
-      border-bottom: 2px solid #0f62fe;
-    }
-    /* The “content” area below header: either chat or graph */
-    .tab-content {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      background: #f4f4f4;
-      overflow: hidden;
-    }
-    /* When Chat is selected: show its container; Graph is hidden */
-    #chat-content {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      overflow: hidden;
-    }
-    #graph-content {
-      display: none;
-      flex: 1;
-      overflow: auto;
-      background: #fff;
-      padding: 1rem;
-    }
-    /* ---------- Intro Paragraph ---------- */
-    .intro {
-      background: white;
-      padding: 1rem;
-      border-bottom: 1px solid #ddd;
-      font-size: 0.95rem;
-      line-height: 1.5;
-      color: #393939;
-    }
-    .intro p {
-      margin: 0.5rem 0;
-    }
-    /* ---------- Chat Area ---------- */
-    .chat-container {
-      flex: 1;
-      overflow-y: auto;
-      padding: 0.5rem 1rem; /* reduced top padding to avoid overlap */
-      display: flex;
-      flex-direction: column;
-    }
-    .message {
-      max-width: 70%;
-      margin-bottom: 0.75rem;
-      padding: 0.5rem 0.75rem;
-      border-radius: 0.5rem;
-      line-height: 1.4;
-      word-wrap: break-word;
-      white-space: pre-wrap;
-    }
-    .message.user {
-      background-color: #0f62fe;
-      color: white;
-      align-self: flex-end;
-    }
-    .message.assistant {
-      background-color: #e0e0e0;
-      color: #161616;
-      align-self: flex-start;
-    }
-    .recs-container {
-      display: flex;
-      flex-wrap: wrap;
-      margin-bottom: 0.75rem;
-      margin-right: 0.25rem;
-    }
-    .recs-item {
-      font-size: 0.85rem;
-      padding: 0.25rem 0.5rem;
-      border-radius: 0.25rem;
-      margin-right: 0.25rem;
-      margin-bottom: 0.25rem;
-      color: white;
-    }
-    .recs-item.add {
-      background-color: #24a148; /* green */
-    }
-    .recs-item.remove {
-      background-color: #da1e28; /* red */
-    }
-    /* ---------- Input Area ---------- */
-    .input-area {
-      border-top: 1px solid #ddd;
-      padding: 0.5rem 1rem;
-      display: flex;
-      align-items: flex-end;
-      background: white;
-    }
-    #userInput {
-      flex: 1;
-      resize: none;
-      font-size: 1rem;
-      padding: 0.5rem;
-      border: 1px solid #c6c6c6;
-      border-radius: 0.375rem;
-      font-family: inherit;
-      line-height: 1.4;
-    }
-    #recommendation {
-      margin-top: 0.25rem;
-      font-size: 0.9rem;
-      color: #393939;
-      display: flex;
-      flex-wrap: wrap;
-    }
-    #recommendation .bx--tag {
-      margin-right: 0.25rem;
-      margin-bottom: 0.25rem;
-      cursor: pointer;
-    }
-    #sendBtn {
-      margin-left: 0.5rem;
-      margin-bottom: 0.25rem;
-    }
-    /* ---------- Graph Area ---------- */
-    #graph {
-      background: #efefef;
-      position: relative;
-    }
-    .tooltip {
-      position: absolute;
-      text-align: left;
-      padding: 0.5em;
-      width: 20em;
-      min-height: 5em;
-      background: #fff;
-      color: #000;
-      border: 1px solid #000;
-      border-radius: 5px;
-      pointer-events: none;
-      font-size: inherit;
-      font-family: inherit;
-    }
-  </style>
 </head>
 <body>
-  <!-- ===== Header: Title + Carbon Tabs ===== -->
-  <div class="header-container">
-    <h1 class="bx--type-expressive-heading-03">Responsible Prompting</h1>
-    <div class="intro">
-        <p>
-          Please provide a prompt that would be sent to an LLM. Recommendations are performed in prompting-time, before content generation. The recommendations consider a curated dataset of values and prompt-sentences. They are based on the similarity between your input and that dataset.
-        </p>
-    </div>
-    <ul class="bx--tabs__nav">
-      <li id="tab-chat" class="bx--tabs__nav-item bx--tabs__nav-item--selected">
-        Chat
-      </li>
-      <li id="tab-graph" class="bx--tabs__nav-item">
-        Graph
-      </li>
-    </ul>
-  </div>
-  <!-- ===== Tab Content: Chat or Graph ===== -->
-  <div class="tab-content">
-    <!-- Chat Content -->
-    <div id="chat-content">
-      <!-- Intro paragraph about responsible prompting -->
-      <!-- Chat container (messages appear here) -->
-      <div id="chat" class="chat-container"></div>
-      <!-- Input area -->
-      <div class="input-area">
-        <div style="flex: 1; display: flex; flex-direction: column;">
-          <textarea
-            id="userInput"
-            rows="4"
-            placeholder="Enter your prompt"
-          >Act as a professional designer with 20 years of experience creating and testing UX interfaces and landing sites for a variety of IT applications. We are in need of more people and an increased budget to be able to keep up with clients' needs. What kind of evidence should I gather to support my demands to gain more resources?</textarea>
-          <div id="recommendation"></div>
         </div>
-        <button id="sendBtn" class="bx--btn bx--btn--primary" disabled>
-          Send
-        </button>
-      </div>
     </div>
-    <!-- Graph Content -->
-    <div id="graph-content">
-      <div id="graph"></div>
     </div>
-  </div>
-  <!-- Dependencies -->
-  <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>
-    // =============================
-    // 1. State & Dimensions for D3
-    // =============================
-    let lastRecommendations = null; // stores latest /recommend response
-    const width = 600;
-    const height = 300;
-    const marginTop = 30;
-    const marginRight = 30;
-    const marginBottom = 30;
-    const marginLeft = 30;
-    const nodeRadius = 3;
-    // Create SVG once
-    const svg = d3
-      .select("#graph")
-      .append("svg")
-      .attr("viewBox", `0 0 ${width} ${height}`)
-      .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;");
-    const tooltip = d3
-      .select("body")
-      .append("div")
-      .attr("class", "tooltip")
-      .style("opacity", 0);
-    function renderGraph(recommendations) {
-      if (!recommendations) {
-        svg.selectAll("*").remove();
-        svg
-          .append("text")
-          .attr("x", width / 2)
-          .attr("y", height / 2)
-          .attr("text-anchor", "middle")
-          .attr("fill", "#666")
-          .text("No recommendation data available");
-        return;
-      }
-      const rec = recommendations;
-      const graphData = { nodes: [], edges: [] };
-      let i = 0,
-        j = 0;
-      // Input sentences
-      if (rec.input && rec.input.length > 0) {
-        graphData.nodes.push({
-          id: 0,
-          x: Number(rec.input[0].x),
-          y: Number(rec.input[0].y),
-          text: rec.input[0].sentence,
-          label: "S1",
-          type: "input",
-        });
-        for (i = 1; i < rec.input.length; i++) {
-          graphData.nodes.push({
-            id: i,
-            x: Number(rec.input[i].x),
-            y: Number(rec.input[i].y),
-            text: rec.input[i].sentence,
-            label: `S${i + 1}`,
-            type: "input",
-          });
-          graphData.edges.push({ source: i - 1, target: i, type: "input" });
         }
-      }
-      // “Add” recommendations
-      if (rec.add && rec.add.length > 0) {
-        for (j = 0; j < rec.add.length; j++) {
-          graphData.nodes.push({
-            id: i + j,
-            x: Number(rec.add[j].x),
-            y: Number(rec.add[j].y),
-            text: rec.add[j].prompt,
-            label: rec.add[j].value,
-            type: "add",
-          });
-          graphData.edges.push({
-            source: i - 1,
-            target: i + j,
-            type: "add",
-          });
         }
-      }
-      // “Remove” recommendation (first only)
-      if (rec.remove && rec.remove.length > 0) {
-        graphData.nodes.push({
-          id: i + j,
-          x: Number(rec.remove[0].x),
-          y: Number(rec.remove[0].y),
-          text: rec.remove[0].closest_harmful_sentence,
-          label: rec.remove[0].value,
-          type: "remove",
-        });
-      }
-      graphData.edges = graphData.edges.map((e) => ({
-        source: graphData.nodes.find((n) => n.id === e.source),
-        target: graphData.nodes.find((n) => n.id === e.target),
-        type: e.type,
-      }));
-      const { nodes, edges } = graphData;
-      if (nodes.length === 0) {
-        svg.selectAll("*").remove();
-        svg
-          .append("text")
-          .attr("x", width / 2)
-          .attr("y", height / 2)
-          .attr("text-anchor", "middle")
-          .attr("fill", "#666")
-          .text("No nodes to display");
-        return;
-      }
-      const xDomain = d3.extent(nodes, (d) => d.x);
-      const yDomain = d3.extent(nodes, (d) => d.y);
-      const xPadding = 2;
-      const yPadding = 2;
-      const xScale = d3
-        .scaleLinear()
-        .domain([xDomain[0] - xPadding, xDomain[1] + xPadding])
-        .nice()
-        .range([marginLeft, width - marginRight]);
-      const yScale = d3
-        .scaleLinear()
-        .domain([yDomain[0] - yPadding, yDomain[1] + yPadding])
-        .nice()
-        .range([height - marginBottom, marginTop]);
-      svg.selectAll("*").remove();
-      // X axis
-      svg
-        .append("g")
-        .attr("transform", `translate(0, ${height - marginBottom})`)
-        .call(d3.axisBottom(xScale).ticks(width / 80))
-        .call((g) => g.select(".domain").remove())
-        .call((g) =>
-          g
-            .append("text")
-            .attr("x", width)
-            .attr("y", marginBottom - 4)
-            .attr("fill", "currentColor")
-            .attr("text-anchor", "end")
-            .text("Semantic dimension 1")
-        );
-      // Y axis
-      svg
-        .append("g")
-        .attr("transform", `translate(${marginLeft}, 0)`)
-        .call(d3.axisLeft(yScale))
-        .call((g) => g.select(".domain").remove())
-        .call((g) =>
-          g
-            .append("text")
-            .attr("x", -marginLeft)
-            .attr("y", 10)
-            .attr("fill", "currentColor")
-            .attr("text-anchor", "start")
-            .text("Semantic dimension 2")
-        );
-      // Grid
-      svg
-        .append("g")
-        .attr("stroke", "#cccccc")
-        .attr("stroke-opacity", 0.5)
-        .call((g) =>
-          g
-            .append("g")
-            .selectAll("line")
-            .data(xScale.ticks())
-            .join("line")
-            .attr("x1", (d) => 0.5 + xScale(d))
-            .attr("x2", (d) => 0.5 + xScale(d))
-            .attr("y1", marginTop)
-            .attr("y2", height - marginBottom)
-        )
-        .call((g) =>
-          g
-            .append("g")
-            .selectAll("line")
-            .data(yScale.ticks())
-            .join("line")
-            .attr("y1", (d) => 0.5 + yScale(d))
-            .attr("y2", (d) => 0.5 + yScale(d))
-            .attr("x1", marginLeft)
-            .attr("x2", width - marginRight)
-        );
-      // Edges
-      svg
-        .append("g")
-        .selectAll("line")
-        .data(edges)
-        .join("line")
-        .attr("stroke", "#666")
-        .attr("stroke-opacity", 0.5)
-        .attr(
-          "x1",
-          (d) =>
-            xScale(d.source.x) +
-            (d.source.x < d.target.x ? 1.3 * nodeRadius : -1.3 * nodeRadius)
-        )
-        .attr("y1", (d) => yScale(d.source.y))
-        .attr(
-          "x2",
-          (d) =>
-            xScale(d.target.x) +
-            (d.source.x > d.target.x ? 1.3 * nodeRadius : -1.3 * nodeRadius)
-        )
-        .attr("y2", (d) => yScale(d.target.y))
-        .style("stroke-dasharray", (d) =>
-          d.target.type === "add" ? "3,3" : ""
-        );
-      // Nodes
-      svg
-        .append("g")
-        .attr("stroke-width", 2.5)
-        .attr("stroke-opacity", 0.5)
-        .attr("fill", "none")
-        .selectAll("circle")
-        .data(nodes)
-        .join("circle")
-        .attr("stroke", (d) =>
-          d.type === "add" ? "green" : d.type === "input" ? "#666" : "red"
-        )
-        .attr("cx", (d) => xScale(d.x))
-        .attr("cy", (d) => yScale(d.y))
-        .attr("r", nodeRadius);
-      // Labels
-      svg
-        .append("g")
-        .attr("font-family", "sans-serif")
-        .attr("text-opacity", 0.5)
-        .attr("font-size", 8)
-        .selectAll("text")
-        .data(nodes)
-        .join("text")
-        .attr("dy", "0.35em")
-        .attr("x", (d) => xScale(d.x) + 5)
-        .attr("y", (d) => yScale(d.y))
-        .text((d) => d.label)
-        .on("mousemove", function (event, d) {
-          d3.select(this)
-            .transition()
-            .duration(50)
-            .attr("text-opacity", 1.0)
-            .attr("stroke", "white")
-            .attr("stroke-width", 3)
-            .style("paint-order", "stroke fill")
-            .attr(
-              "fill",
-              d.type === "add"
-                ? "green"
-                : d.type === "input"
-                ? "black"
-                : "red"
-            );
-          tooltip.transition().duration(50).style("opacity", 1);
-          tooltip
-            .html(`<strong>${d.label}:</strong><br/>${d.text}`)
-            .style("left", event.pageX + 10 + "px")
-            .style("top", event.pageY + 10 + "px");
-        })
-        .on("mouseout", function () {
-          d3.select(this)
-            .transition()
-            .duration(50)
-            .attr("text-opacity", 0.5)
-            .attr("stroke-width", 0)
-            .style("paint-order", "fill")
-            .attr("fill", "black");
-          tooltip.transition().duration(50).style("opacity", 0);
-        });
-    }
-    // Initially show “no data” message
-    renderGraph(null);
-    // =============================
-    // 2. Multi‐Turn Chat + Recommendation Logic
-    // =============================
-    const conversation = []; // stores { role, content, recs? }
-    let currentRecs = [];
-    let debounceId = null;
-    function appendUserTurn(turn) {
-      const bubble = $("<div>")
-        .addClass("message user")
-        .text(turn.content);
-      $("#chat").append(bubble);
-      if (turn.recs && turn.recs.length > 0) {
-        const container = $("<div>").addClass("recs-container");
-        turn.recs.forEach((r) => {
-          const item = $("<div>")
-            .addClass("recs-item")
-            .addClass(r.type === "add" ? "add" : "remove")
-            .text(r.value);
-          container.append(item);
-        });
-        container.css("align-self", "flex-end");
-        $("#chat").append(container);
-      }
-      $("#chat").scrollTop($("#chat")[0].scrollHeight);
-    }
-    function appendAssistantTurn(text) {
-      const bubble = $("<div>")
-        .addClass("message assistant")
-        .text(text);
-      $("#chat").append(bubble);
-      $("#chat").scrollTop($("#chat")[0].scrollHeight);
-    }
-    $("#userInput").on("input", function () {
-      const txt = $(this).val();
-      const trimmed = txt.trim();
-      if (trimmed.length > 0) {
-        $("#sendBtn").removeAttr("disabled");
-      } else {
-        $("#sendBtn").attr("disabled", true);
-        $("#recommendation").empty();
-      }
-      clearTimeout(debounceId);
-      if (txt.length > 0 && /[.?!]$/.test(txt)) {
-        debounceId = setTimeout(() => {
-          $("#recommendation").html(
-            'Checking recommendations… <div class="bx--tag bx--tag--gray bx--tag--deletable">…</div>'
-          );
-          $.getJSON("/recommend?prompt=" + encodeURIComponent(txt), (data) => {
-            $("#recommendation").empty();
-            lastRecommendations = data;
-            if (data.remove && data.remove.length > 0) {
-              const rec = data.remove[0];
-              const sentence = rec.sentence.replaceAll("'", "\\'");
-              const valueEscaped = rec.value.replaceAll("'", "\\'");
-              const $tag = $(`
                 <div class="bx--tag bx--tag--red bx--tag--deletable">
                   ✕ ${valueEscaped}
                 </div>
               `);
-              $tag.hover(
-                () => {
-                  const cur = $("#userInput").val();
-                  $("#userInput").data("prevText", cur);
-                  $("#userInput").val(cur.replace(rec.sentence, ""));
-                },
-                () => {
-                  const prev = $("#userInput").data("prevText") || txt;
-                  $("#userInput").val(prev);
-                }
-              );
-              $tag.click(() => {
-                const updated = $("#userInput")
-                  .val()
-                  .replace(rec.sentence, "")
-                  .replace(/ {2,}/g, " ")
-                  .trim();
-                $("#userInput").val(updated);
-                currentRecs.push({ type: "remove", value: rec.value });
-                $("#recommendation").empty();
-                $("#userInput").trigger("input");
-              });
-              $("#recommendation").append($tag);
-            }
-            if (data.add && data.add.length > 0) {
-              data.add.forEach((rec) => {
-                if (!$("#userInput").val().includes(rec.prompt)) {
-                  const promptEscaped = rec.prompt.replaceAll("'", "\\'");
-                  const valueEscaped = rec.value.replaceAll("'", "\\'");
-                  const $tag = $(`
                     <div class="bx--tag bx--tag--green">
                       + ${valueEscaped}
                     </div>
                   `);
-                  $tag.hover(
-                    () => {
-                      const cur = $("#userInput").val();
-                      $("#userInput").data("prevAdd", cur);
-                      $("#userInput").val((cur + " " + rec.prompt).trim());
-                    },
-                    () => {
-                      const prev = $("#userInput").data("prevAdd") || txt;
-                      $("#userInput").val(prev);
                     }
-                  );
-                  $tag.click(() => {
-                    const base =
-                      $("#userInput").data("prevAdd") ||
-                      $("#userInput").val().trim();
-                    $("#userInput").val((base + " " + rec.prompt).trim());
-                    currentRecs.push({ type: "add", value: rec.value });
-                    $("#recommendation").empty();
-                    $("#userInput").trigger("input");
-                  });
-                  $("#recommendation").append($tag);
                 }
-              });
             }
-            if (
-              (!data.add || data.add.length === 0) &&
-              (!data.remove || data.remove.length === 0)
-            ) {
-              $("#recommendation").text("No recommendations found.");
-            }
-          });
-        }, 500);
-      } else {
-        $("#recommendation").empty();
-        lastRecommendations = null;
-      }
-    });
-    $("#sendBtn").on("click", function () {
-      const rawText = $("#userInput").val();
-      const userText = rawText.trim();
-      if (!userText) return;
-      const thisTurn = {
-        role: "user",
-        content: userText,
-        recs: currentRecs.slice(),
-      };
-      conversation.push(thisTurn);
-      appendUserTurn(thisTurn);
-      $("#userInput").val("");
-      $("#recommendation").empty();
-      $("#sendBtn").attr("disabled", true);
-      currentRecs = [];
-      const typingBubble = $("<div>")
-        .addClass("message assistant")
-        .attr("id", "typing")
-        .text("Assistant is typing…");
-      $("#chat").append(typingBubble);
-      $("#chat").scrollTop($("#chat")[0].scrollHeight);
-      let fullPrompt = "";
-      conversation.forEach((turn) => {
-        if (turn.role === "user") {
-          fullPrompt += `User: ${turn.content}\n`;
-        } else {
-          fullPrompt += `Assistant: ${turn.content}\n`;
-        }
-      });
-      fullPrompt += "Assistant: ";
-      $.ajax({
-        url: "/demo_inference?prompt=" + encodeURIComponent(fullPrompt),
-        dataType: "json",
-        success: function (data) {
-          $("#typing").remove();
-          const generated = data.content;
-          const modelId = data.model_id;
-          const temp = data.temperature;
-          const maxTokens = data.max_new_tokens;
-          let toType = `Model: ${modelId}  ·  Temperature: ${temp}  ·  Max tokens: ${maxTokens}\n\n`;
-          toType += generated;
-          const assistantBubble = $("<div>")
-            .addClass("message assistant")
-            .attr("id", "assistantBubble")
-            .text("");
-          $("#chat").append(assistantBubble);
-          $("#chat").scrollTop($("#chat")[0].scrollHeight);
-          const chars = toType.split("");
-          let idx = 0;
-          function typeNext() {
-            if (idx < chars.length) {
-              const cur = $("#assistantBubble").text();
-              $("#assistantBubble").text(cur + chars[idx]);
-              idx++;
-              $("#chat").scrollTop($("#chat")[0].scrollHeight);
-              setTimeout(typeNext, 10);
-            } else {
-              $("#assistantBubble").removeAttr("id");
-              conversation.push({
-                role: "assistant",
-                content: generated,
-              });
-            }
-          }
-          typeNext();
-        },
-        error: function (xhr) {
-          $("#typing").remove();
-          const err =
-            xhr.responseJSON?.error?.message ||
-            "Unknown error from inference.";
-          appendAssistantTurn(`Error: ${err}`);
-        },
-      });
-    });
-    $("#userInput").on("keydown", function (e) {
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        if (!$("#sendBtn").attr("disabled")) {
-          $("#sendBtn").click();
-        }
-      }
-    });
-    // =============================
-    // 3. Tab Switching (Chat <-> Graph)
-    // =============================
-    $("#tab-chat").on("click", function () {
-      $(this).addClass("bx--tabs__nav-item--selected");
-      $("#tab-graph").removeClass("bx--tabs__nav-item--selected");
-      $("#chat-content").show();
-      $("#graph-content").hide();
-    });
-    $("#tab-graph").on("click", function () {
-      $(this).addClass("bx--tabs__nav-item--selected");
-      $("#tab-chat").removeClass("bx--tabs__nav-item--selected");
-      $("#chat-content").hide();
-      $("#graph-content").show();
-      renderGraph(lastRecommendations);
-    });
-  </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Responsible Prompting – Multi‐Turn Chat + Graph</title>
+    <!-- Carbon CSS (for tabs and tags) -->
+    <link rel="stylesheet" href="https://unpkg.com/carbon-components/css/carbon-components.min.css" />
+    <style>
+        /* ---------- Overall Layout ---------- */
+        html,
+        body {
+            margin: 0;
+            padding: 0;
+            height: 100vh;
+            font-family: "IBM Plex Sans", sans-serif;
+        }
+        body {
+            display: flex;
+            flex-direction: column;
+        }
+        /* Container for the header (title + tabs) */
+        .header-container {
+            background: white;
+            padding: 1rem;
+            border-bottom: 1px solid #ddd;
+        }
+        .bx--tabs__nav {
+            position: relative;
+            display: flex;
+            list-style: none;
+            padding: 0;
+            margin: 0;
+            border-bottom: 2px solid #c6c6c6;
+        }
+        .bx--tabs__nav-item {
+            text-align: center;
+            justify-content: center;
+            display: block;
+            margin-right: 1rem;
+            padding: 0.5rem 0.75rem;
+            cursor: pointer;
+            font-size: 1rem;
+            color: #393939;
+            border-bottom: 2px solid transparent;
+        }
+        .bx--tabs__nav-item--selected {
+            font-weight: bold;
+            border-bottom: 2px solid #0f62fe !important;
+        }
+        /* The “content” area below header: either chat or graph */
+        .tab-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            padding: 5px;
+        }
+        /* When Chat is selected: show its container; Graph is hidden */
+        #chat-content {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            overflow: hidden;
+        }
+        #graph-content {
+            display: none;
+            flex: 1;
+            overflow: auto;
+            padding: 1rem;
+        }
+        /* ---------- Intro Paragraph ---------- */
+        .intro {
+            background: white;
+            padding: 1rem;
+            border-bottom: 1px solid #ddd;
+            font-size: 0.95rem;
+            line-height: 1.5;
+            color: #393939;
+        }
+        .intro p {
+            margin: 0.5rem 0;
+        }
+        /* ---------- Chat Area ---------- */
+        .chat-container {
+            flex: 1;
+            overflow-y: auto;
+            padding: 0.5rem 1rem;
+            /* reduced top padding to avoid overlap */
+            display: flex;
+            flex-direction: column;
+        }
+        .message {
+            max-width: 70%;
+            margin-bottom: 0.75rem;
+            padding: 0.5rem 0.75rem;
+            border-radius: 0.5rem;
+            line-height: 1.4;
+            word-wrap: break-word;
+            white-space: pre-wrap;
+        }
+        .message.user {
+            background-color: #0f62fe;
+            color: white;
+            align-self: flex-end;
+        }
+        .message.assistant {
+            background-color: #e0e0e0;
+            color: #161616;
+            align-self: flex-start;
+        }
+        .recs-container {
+            display: flex;
+            flex-wrap: wrap;
+            margin-bottom: 0.75rem;
+            margin-right: 0.25rem;
+        }
+        .recs-item {
+            font-size: 0.85rem;
+            padding: 0.25rem 0.5rem;
+            border-radius: 0.25rem;
+            margin-right: 0.25rem;
+            margin-bottom: 0.25rem;
+            color: white;
+        }
+        .recs-item.add {
+            background-color: #24a148;
+            /* green */
+        }
+        .recs-item.remove {
+            background-color: #da1e28;
+            /* red */
+        }
+        /* ---------- Input Area ---------- */
+        .input-area {
+            border-top: 1px solid #ddd;
+            padding: 0.5rem 1rem;
+            display: flex;
+            align-items: flex-end;
+            background: white;
+            align-items: center;
+        }
+        #userInput {
+            flex: 1;
+            resize: none;
+            font-size: 1rem;
+            padding: 0.5rem;
+            border: 1px solid #c6c6c6;
+            border-radius: 0.375rem;
+            font-family: inherit;
+            line-height: 1.4;
+        }
+        #recommendation {
+            margin-top: 0.25rem;
+            font-size: 0.9rem;
+            color: #393939;
+            display: flex;
+            flex-wrap: wrap;
+            height: 30px;
+        }
+        #recommendation .bx--tag {
+            margin-right: 0.25rem;
+            margin-bottom: 0.25rem;
+            cursor: pointer;
+        }
+        #sendBtn {
+            margin-left: 0.5rem;
+            margin-bottom: 0.25rem;
+            background-color: red;
+        }
+        /* ---------- Graph Area ---------- */
+        #graph {
+            background: #efefef;
+            position: relative;
+        }
+        .tooltip {
+            position: absolute;
+            text-align: left;
+            padding: 0.5em;
+            width: 20em;
+            min-height: 5em;
+            background: #fff;
+            color: #000;
+            border: 1px solid #000;
+            border-radius: 5px;
+            pointer-events: none;
+            font-size: inherit;
+            font-family: inherit;
+        }
+    </style>
 </head>
 <body>
+    <!-- ===== Header: Title + Carbon Tabs ===== -->
+    <div class="header-container">
+        <h1 class="bx--type-expressive-heading-03">Responsible Prompting</h1>
+        <div class="intro">
+            <p>
+                Please provide a prompt that would be sent to an LLM. Recommendations are performed in prompting-time,
+                before content generation. The recommendations consider a curated dataset of values and
+                prompt-sentences. They are based on the similarity between your input and that dataset.
+            </p>
         </div>
+        <ol class="bx--tabs__nav">
+            <li id="tab-chat" class="bx--tabs__nav-item bx--tabs__nav-item--selected">
+                Chat
+            </li>
+            <li id="tab-graph" class="bx--tabs__nav-item">
+                Graph
+            </li>
+        </ol>
     </div>
+    <!-- ===== Tab Content: Chat or Graph ===== -->
+    <div class="tab-content">
+        <!-- Chat Content -->
+        <div id="chat-content">
+            <!-- Intro paragraph about responsible prompting -->
+            <!-- Chat container (messages appear here) -->
+            <div id="chat" class="chat-container"></div>
+            <!-- Input area -->
+            <div class="input-area">
+                <div style="flex: 1; display: flex; flex-direction: column;">
+                    <textarea id="userInput" rows="4"
+                        placeholder="Enter your prompt">Act as a professional designer with 20 years of experience creating and testing UX interfaces and landing sites for a variety of IT applications. We are in need of more people and an increased budget to be able to keep up with clients' needs. What kind of evidence should I gather to support my demands to gain more resources?</textarea>
+                    <div id="recommendation"></div>
+                </div>
+                <button id="sendBtn" class="bx--btn bx--btn--primary" disabled>
+                    Send
+                </button>
+            </div>
+        </div>
+        <!-- Graph Content -->
+        <div id="graph-content">
+            <div id="graph"></div>
+        </div>
     </div>
+    <!-- Dependencies -->
+    <script type="text/javascript" src="./js/d3.v7.min.js"></script>
+    <script type="text/javascript" src="./js/jquery-3.7.1.min.js"></script>
+    <script>
+        // =============================
+        // 1. State & Dimensions for D3
+        // =============================
+        let lastRecommendations = null; // stores latest /recommend response
+        const width = 600;
+        const height = 300;
+        const marginTop = 30;
+        const marginRight = 30;
+        const marginBottom = 30;
+        const marginLeft = 30;
+        const nodeRadius = 3;
+        // Create SVG once
+        const svg = d3
+            .select("#graph")
+            .append("svg")
+            .attr("viewBox", `0 0 ${width} ${height}`)
+            .attr("style", "max-width: 100%; height: auto; font: 8px sans-serif;");
+        const tooltip = d3
+            .select("body")
+            .append("div")
+            .attr("class", "tooltip")
+            .style("opacity", 0);
+        function renderGraph(recommendations) {
+            if (!recommendations) {
+                svg.selectAll("*").remove();
+                svg
+                    .append("text")
+                    .attr("x", width / 2)
+                    .attr("y", height / 2)
+                    .attr("text-anchor", "middle")
+                    .attr("fill", "#666")
+                    .text("No recommendation data available");
+                return;
+            }
+            const rec = recommendations;
+            const graphData = { nodes: [], edges: [] };
+            let i = 0,
+                j = 0;
+            // Input sentences
+            if (rec.input && rec.input.length > 0) {
+                graphData.nodes.push({
+                    id: 0,
+                    x: Number(rec.input[0].x),
+                    y: Number(rec.input[0].y),
+                    text: rec.input[0].sentence,
+                    label: "S1",
+                    type: "input",
+                });
+                for (i = 1; i < rec.input.length; i++) {
+                    graphData.nodes.push({
+                        id: i,
+                        x: Number(rec.input[i].x),
+                        y: Number(rec.input[i].y),
+                        text: rec.input[i].sentence,
+                        label: `S${i + 1}`,
+                        type: "input",
+                    });
+                    graphData.edges.push({ source: i - 1, target: i, type: "input" });
+                }
+            }
+            // “Add” recommendations
+            if (rec.add && rec.add.length > 0) {
+                for (j = 0; j < rec.add.length; j++) {
+                    graphData.nodes.push({
+                        id: i + j,
+                        x: Number(rec.add[j].x),
+                        y: Number(rec.add[j].y),
+                        text: rec.add[j].prompt,
+                        label: rec.add[j].value,
+                        type: "add",
+                    });
+                    graphData.edges.push({
+                        source: i - 1,
+                        target: i + j,
+                        type: "add",
+                    });
+                }
+            }
+            // “Remove” recommendation (first only)
+            if (rec.remove && rec.remove.length > 0) {
+                graphData.nodes.push({
+                    id: i + j,
+                    x: Number(rec.remove[0].x),
+                    y: Number(rec.remove[0].y),
+                    text: rec.remove[0].closest_harmful_sentence,
+                    label: rec.remove[0].value,
+                    type: "remove",
+                });
+            }
+            graphData.edges = graphData.edges.map((e) => ({
+                source: graphData.nodes.find((n) => n.id === e.source),
+                target: graphData.nodes.find((n) => n.id === e.target),
+                type: e.type,
+            }));
+            const { nodes, edges } = graphData;
+            if (nodes.length === 0) {
+                svg.selectAll("*").remove();
+                svg
+                    .append("text")
+                    .attr("x", width / 2)
+                    .attr("y", height / 2)
+                    .attr("text-anchor", "middle")
+                    .attr("fill", "#666")
+                    .text("No nodes to display");
+                return;
+            }
+            const xDomain = d3.extent(nodes, (d) => d.x);
+            const yDomain = d3.extent(nodes, (d) => d.y);
+            const xPadding = 2;
+            const yPadding = 2;
+            const xScale = d3
+                .scaleLinear()
+                .domain([xDomain[0] - xPadding, xDomain[1] + xPadding])
+                .nice()
+                .range([marginLeft, width - marginRight]);
+            const yScale = d3
+                .scaleLinear()
+                .domain([yDomain[0] - yPadding, yDomain[1] + yPadding])
+                .nice()
+                .range([height - marginBottom, marginTop]);
+            svg.selectAll("*").remove();
+            // X axis
+            svg
+                .append("g")
+                .attr("transform", `translate(0, ${height - marginBottom})`)
+                .call(d3.axisBottom(xScale).ticks(width / 80))
+                .call((g) => g.select(".domain").remove())
+                .call((g) =>
+                    g
+                        .append("text")
+                        .attr("x", width)
+                        .attr("y", marginBottom - 4)
+                        .attr("fill", "currentColor")
+                        .attr("text-anchor", "end")
+                        .text("Semantic dimension 1")
+                );
+            // Y axis
+            svg
+                .append("g")
+                .attr("transform", `translate(${marginLeft}, 0)`)
+                .call(d3.axisLeft(yScale))
+                .call((g) => g.select(".domain").remove())
+                .call((g) =>
+                    g
+                        .append("text")
+                        .attr("x", -marginLeft)
+                        .attr("y", 10)
+                        .attr("fill", "currentColor")
+                        .attr("text-anchor", "start")
+                        .text("Semantic dimension 2")
+                );
+            // Grid
+            svg
+                .append("g")
+                .attr("stroke", "#cccccc")
+                .attr("stroke-opacity", 0.5)
+                .call((g) =>
+                    g
+                        .append("g")
+                        .selectAll("line")
+                        .data(xScale.ticks())
+                        .join("line")
+                        .attr("x1", (d) => 0.5 + xScale(d))
+                        .attr("x2", (d) => 0.5 + xScale(d))
+                        .attr("y1", marginTop)
+                        .attr("y2", height - marginBottom)
+                )
+                .call((g) =>
+                    g
+                        .append("g")
+                        .selectAll("line")
+                        .data(yScale.ticks())
+                        .join("line")
+                        .attr("y1", (d) => 0.5 + yScale(d))
+                        .attr("y2", (d) => 0.5 + yScale(d))
+                        .attr("x1", marginLeft)
+                        .attr("x2", width - marginRight)
+                );
+            // Edges
+            svg
+                .append("g")
+                .selectAll("line")
+                .data(edges)
+                .join("line")
+                .attr("stroke", "#666")
+                .attr("stroke-opacity", 0.5)
+                .attr(
+                    "x1",
+                    (d) =>
+                        xScale(d.source.x) +
+                        (d.source.x < d.target.x ? 1.3 * nodeRadius : -1.3 * nodeRadius)
+                )
+                .attr("y1", (d) => yScale(d.source.y))
+                .attr(
+                    "x2",
+                    (d) =>
+                        xScale(d.target.x) +
+                        (d.source.x > d.target.x ? 1.3 * nodeRadius : -1.3 * nodeRadius)
+                )
+                .attr("y2", (d) => yScale(d.target.y))
+                .style("stroke-dasharray", (d) =>
+                    d.target.type === "add" ? "3,3" : ""
+                );
+            // Nodes
+            svg
+                .append("g")
+                .attr("stroke-width", 2.5)
+                .attr("stroke-opacity", 0.5)
+                .attr("fill", "none")
+                .selectAll("circle")
+                .data(nodes)
+                .join("circle")
+                .attr("stroke", (d) =>
+                    d.type === "add" ? "green" : d.type === "input" ? "#666" : "red"
+                )
+                .attr("cx", (d) => xScale(d.x))
+                .attr("cy", (d) => yScale(d.y))
+                .attr("r", nodeRadius);
+            // Labels
+            svg
+                .append("g")
+                .attr("font-family", "sans-serif")
+                .attr("text-opacity", 0.5)
+                .attr("font-size", 8)
+                .selectAll("text")
+                .data(nodes)
+                .join("text")
+                .attr("dy", "0.35em")
+                .attr("x", (d) => xScale(d.x) + 5)
+                .attr("y", (d) => yScale(d.y))
+                .text((d) => d.label)
+                .on("mousemove", function (event, d) {
+                    d3.select(this)
+                        .transition()
+                        .duration(50)
+                        .attr("text-opacity", 1.0)
+                        .attr("stroke", "white")
+                        .attr("stroke-width", 3)
+                        .style("paint-order", "stroke fill")
+                        .attr(
+                            "fill",
+                            d.type === "add"
+                                ? "green"
+                                : d.type === "input"
+                                    ? "black"
+                                    : "red"
+                        );
+                    tooltip.transition().duration(50).style("opacity", 1);
+                    tooltip
+                        .html(`<strong>${d.label}:</strong><br/>${d.text}`)
+                        .style("left", event.pageX + 10 + "px")
+                        .style("top", event.pageY + 10 + "px");
+                })
+                .on("mouseout", function () {
+                    d3.select(this)
+                        .transition()
+                        .duration(50)
+                        .attr("text-opacity", 0.5)
+                        .attr("stroke-width", 0)
+                        .style("paint-order", "fill")
+                        .attr("fill", "black");
+                    tooltip.transition().duration(50).style("opacity", 0);
+                });
         }
+        // Initially show “no data” message
+        renderGraph(null);
+        // =============================
+        // 2. Multi‐Turn Chat + Recommendation Logic
+        // =============================
+        const conversation = []; // stores { role, content, recs? }
+        let currentRecs = [];
+        let debounceId = null;
+        function appendUserTurn(turn) {
+            const bubble = $("<div>")
+                .addClass("message user")
+                .text(turn.content);
+            $("#chat").append(bubble);
+            if (turn.recs && turn.recs.length > 0) {
+                const container = $("<div>").addClass("recs-container");
+                turn.recs.forEach((r) => {
+                    const item = $("<div>")
+                        .addClass("recs-item")
+                        .addClass(r.type === "add" ? "add" : "remove")
+                        .text(r.value);
+                    container.append(item);
+                });
+                container.css("align-self", "flex-end");
+                $("#chat").append(container);
+            }
+            $("#chat").scrollTop($("#chat")[0].scrollHeight);
         }
+        function appendAssistantTurn(text) {
+            const bubble = $("<div>")
+                .addClass("message assistant")
+                .text(text);
+            $("#chat").append(bubble);
+            $("#chat").scrollTop($("#chat")[0].scrollHeight);
+        }
+        $("#userInput").on("input", function () {
+            const txt = $(this).val();
+            const trimmed = txt.trim();
+            if (trimmed.length > 0) {
+                $("#sendBtn").removeAttr("disabled");
+            } else {
+                $("#sendBtn").attr("disabled", true);
+                $("#recommendation").empty();
+            }
+            clearTimeout(debounceId);
+            if (txt.length > 0 && /[.?!]$/.test(txt)) {
+                debounceId = setTimeout(() => {
+                    $("#recommendation").html(
+                        'Checking recommendations…'
+                    );
+                    $.getJSON("/recommend?prompt=" + encodeURIComponent(txt), (data) => {
+                        $("#recommendation").empty();
+                        lastRecommendations = data;
+                        if (data.remove && data.remove.length > 0) {
+                            const rec = data.remove[0];
+                            const sentence = rec.sentence.replaceAll("'", "\\'");
+                            const valueEscaped = rec.value.replaceAll("'", "\\'");
+                            const $tag = $(`
                 <div class="bx--tag bx--tag--red bx--tag--deletable">
                   ✕ ${valueEscaped}
                 </div>
               `);
+                            $tag.hover(
+                                () => {
+                                    const cur = $("#userInput").val();
+                                    $("#userInput").data("prevText", cur);
+                                    $("#userInput").val(cur.replace(rec.sentence, ""));
+                                },
+                                () => {
+                                    const prev = $("#userInput").data("prevText") || txt;
+                                    $("#userInput").val(prev);
+                                }
+                            );
+                            $tag.click(() => {
+                                const updated = $("#userInput")
+                                    .val()
+                                    .replace(rec.sentence, "")
+                                    .replace(/ {2,}/g, " ")
+                                    .trim();
+                                $("#userInput").val(updated);
+                                currentRecs.push({ type: "remove", value: rec.value });
+                                $("#recommendation").empty();
+                                $("#userInput").trigger("input");
+                            });
+                            $("#recommendation").append($tag);
+                        }
+                        if (data.add && data.add.length > 0) {
+                            data.add.forEach((rec) => {
+                                if (!$("#userInput").val().includes(rec.prompt)) {
+                                    const promptEscaped = rec.prompt.replaceAll("'", "\\'");
+                                    const valueEscaped = rec.value.replaceAll("'", "\\'");
+                                    const $tag = $(`
                     <div class="bx--tag bx--tag--green">
                       + ${valueEscaped}
                     </div>
                   `);
+                                    $tag.hover(
+                                        () => {
+                                            const cur = $("#userInput").val();
+                                            $("#userInput").data("prevAdd", cur);
+                                            $("#userInput").val((cur + " " + rec.prompt).trim());
+                                        },
+                                        () => {
+                                            const prev = $("#userInput").data("prevAdd") || txt;
+                                            $("#userInput").val(prev);
+                                        }
+                                    );
+                                    $tag.click(() => {
+                                        const base =
+                                            $("#userInput").data("prevAdd") ||
+                                            $("#userInput").val().trim();
+                                        $("#userInput").val((base + " " + rec.prompt).trim());
+                                        currentRecs.push({ type: "add", value: rec.value });
+                                        $("#recommendation").empty();
+                                        $("#userInput").trigger("input");
+                                    });
+                                    $("#recommendation").append($tag);
+                                }
+                            });
+                        }
+                        if (
+                            (!data.add || data.add.length === 0) &&
+                            (!data.remove || data.remove.length === 0)
+                        ) {
+                            $("#recommendation").text("No recommendations found.");
+                        }
+                    });
+                }, 500);
+            } else {
+                $("#recommendation").empty();
+                lastRecommendations = null;
+            }
+        });
+        $("#sendBtn").on("click", function () {
+            const rawText = $("#userInput").val();
+            const userText = rawText.trim();
+            if (!userText) return;
+            const thisTurn = {
+                role: "user",
+                content: userText,
+                recs: currentRecs.slice(),
+            };
+            conversation.push(thisTurn);
+            appendUserTurn(thisTurn);
+            $("#userInput").val("");
+            $("#recommendation").empty();
+            $("#sendBtn").attr("disabled", true);
+            currentRecs = [];
+            const typingBubble = $("<div>")
+                .addClass("message assistant")
+                .attr("id", "typing")
+                .text("Requesting Content…");
+            $("#chat").append(typingBubble);
+            $("#chat").scrollTop($("#chat")[0].scrollHeight);
+            let fullPrompt = "";
+            conversation.forEach((turn) => {
+                if (turn.role === "user") {
+                    fullPrompt += `User: ${turn.content}\n`;
+                } else {
+                    fullPrompt += `Assistant: ${turn.content}\n`;
+                }
+            });
+            fullPrompt += "Assistant: ";
+            $.ajax({
+                url: "/demo_inference?prompt=" + encodeURIComponent(fullPrompt),
+                dataType: "json",
+                success: function (data) {
+                    $("#typing").remove();
+                    const generated = data.content;
+                    const modelId = data.model_id;
+                    const temp = data.temperature;
+                    const maxTokens = data.max_new_tokens;
+                    let toType = `Model: ${modelId}  ·  Temperature: ${temp}  ·  Max tokens: ${maxTokens}\n\n`;
+                    toType += generated;
+                    const assistantBubble = $("<div>")
+                        .addClass("message assistant")
+                        .attr("id", "assistantBubble")
+                        .text("");
+                    $("#chat").append(assistantBubble);
+                    $("#chat").scrollTop($("#chat")[0].scrollHeight);
+                    const chars = toType.split("");
+                    let idx = 0;
+                    function typeNext() {
+                        if (idx < chars.length) {
+                            const cur = $("#assistantBubble").text();
+                            $("#assistantBubble").text(cur + chars[idx]);
+                            idx++;
+                            $("#chat").scrollTop($("#chat")[0].scrollHeight);
+                            setTimeout(typeNext, 10);
+                        } else {
+                            $("#assistantBubble").removeAttr("id");
+                            conversation.push({
+                                role: "assistant",
+                                content: generated,
+                            });
+                        }
                     }
+                    typeNext();
+                },
+                error: function (xhr) {
+                    $("#typing").remove();
+                    const err =
+                        xhr.responseJSON?.error?.message ||
+                        "Unknown error from inference.";
+                    appendAssistantTurn(`Error: ${err}`);
+                },
+            });
+        });
+        $("#userInput").on("keydown", function (e) {
+            if (e.key === "Enter" && !e.shiftKey) {
+                e.preventDefault();
+                if (!$("#sendBtn").attr("disabled")) {
+                    $("#sendBtn").click();
                 }
             }
+        });
+        // =============================
+        // 3. Tab Switching (Chat <-> Graph)
+        // =============================
+        $("#tab-chat").on("click", function () {
+            $(this).addClass("bx--tabs__nav-item--selected");
+            $("#tab-graph").removeClass("bx--tabs__nav-item--selected");
+            $("#chat-content").show();
+            $("#graph-content").hide();
+        });
+        $("#tab-graph").on("click", function () {
+            $(this).addClass("bx--tabs__nav-item--selected");
+            $("#tab-chat").removeClass("bx--tabs__nav-item--selected");
+            $("#chat-content").hide();
+            $("#graph-content").show();
+            renderGraph(lastRecommendations);
+        });
+    </script>
 </body>
 </html>