").addClass("recs-container");
turn.recs.forEach((rec, index) => {
let r = rec.recommendation;
const item = $("
")
.addClass("recs-item")
.addClass(r.type === "add" ? "add" : "remove")
.attr('title', r.sentence)
.text((r.type === "add" ? "+ " : "x ") + r.value);
let itemId = `rec-${conversation.length}-${index}`;
item.attr('id', itemId);
container.append(item);
});
container.css("align-self", "flex-end");
$(chatId).append(container);
}
$(chatId).scrollTop($(chatId)[0].scrollHeight);
}
function appendAssistantTurn(text, chatId, bubbleId) {
const bubble = $("
")
.addClass("message assistant")
.attr('id', bubbleId)
.text(text);
$(chatId).append(bubble);
$(chatId).scrollTop($(chatId)[0].scrollHeight);
}
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function generateResponse(rawText, chatId, sendBtnId) {
const userText = rawText.trim();
if (!userText) return;
generating = true;
const thisTurn = {
role: "user",
content: userText,
recs: selectedRecs.slice(),
};
conversation.push(thisTurn);
appendUserTurn(thisTurn, chatId);
selectedRecs = [];
// "Typing..." placeholder
const typingBubble = $("
")
.addClass("message assistant")
.attr("id", "typing")
.text("Requesting Content…");
$(chatId).append(typingBubble);
$(chatId).scrollTop($(chatId)[0].scrollHeight);
// Build full prompt
let fullPrompt = "";
conversation.forEach((turn) => {
if (turn.role === "user") {
fullPrompt += `User: ${turn.content}\n`;
} else {
fullPrompt += `Assistant: ${turn.content}\n`;
}
});
fullPrompt += "Assistant: ";
modelId = selectedModel.id;
inference_provider = selectedModel.inference_provider;
$.ajax({
url: "/demo_inference?prompt=" + encodeURIComponent(fullPrompt) + "&model_id=" + encodeURIComponent(modelId) + "&inference_provider=" + encodeURIComponent(inference_provider),
dataType: "json",
success: async function (data) {
$("#typing").remove();
const generated = data.content.trim();
const modelId = data.model_id;
const temp = data.temperature;
const maxTokens = data.max_new_tokens;
const modelHeader = $("
")
.addClass("model-info")
.html(`
${modelId} (via ${inference_provider})
`);
$(chatId).append(modelHeader);
appendAssistantTurn("", chatId, "assistantBubble")
const chars = generated.split("");
let idx = 0;
const chatEl = $(chatId)[0];
var keepScrollDown = true;
var cur = '';
while (idx < chars.length) {
if (chatEl.scrollHeight != chatEl.scrollTop + chatEl.clientHeight) {
keepScrollDown = false;
}
cur += chars[idx];
$("#assistantBubble").html(marked.parse(cur));
idx++;
if(keepScrollDown) $(chatId).scrollTop($(chatId)[0].scrollHeight);
await delay(0);
}
if(keepScrollDown) $(chatId).scrollTop($(chatId)[0].scrollHeight);
$("#assistantBubble").removeAttr("id");
conversation.push({
role: "assistant",
content: generated,
});
generating = false;
if($("#userInputDiv").text().length > 0) $(sendBtnId).attr("disabled", false);
},
error: function (xhr) {
$("#typing").remove();
const err =
xhr.responseJSON?.error?.message ||
"Unknown error from inference.";
appendAssistantTurn(`Error: ${err}`, chatId, "assistantBubble");
generating = false;
},
});
}
let popupOpen = false;
function toggleGraph(data, itemId, chatId) {
const existing = document.getElementById('popup');
if (existing) {
existing.remove();
popupOpen = false;
return;
}
const tag = document.getElementById(itemId);
const rect = tag.getBoundingClientRect();
const popup = document.createElement('div');
popup.id = 'popup';
// reuse .tooltip styles but allow pointer events
popup.className = 'tooltip';
popup.style.pointerEvents = 'auto';
popup.style.width = '800px';
popup.style.height = '420px';
popup.style.zIndex = 2;
popup.style.left = `${rect.left + window.scrollX - 17}px`;
popup.style.top = `${rect.top + window.scrollY - rect.height - 410}px`;
const container = document.createElement('svg');
container.style.width = '100%';
container.style.height = '100%';
container.innerHTML = ""
popup.appendChild(container);
document.body.appendChild(popup);
renderGraph(data, '#popup-graph', "#tooltip");
// close on outside click
const onClickOutside = (e) => {
if (!popup.contains(e.target) && e.target !== tag) {
popup.remove();
document.removeEventListener('click', onClickOutside);
popupOpen = false;
}
};
setTimeout(() => {
document.addEventListener('click', onClickOutside);
}, 0);
popupOpen = true;
}
let lastRecommendations = [];
const conversation = []; // stores { role, content, recs? }
let selectedRecs = []; // stores { recommendation, graphData }
let debounceId = null;
function generateRecommendations(sendBtnId, promptInputId, recommendationDivId) {
const txt = $(promptInputId).text().trim() || "";
clearTimeout(debounceId);
let stopRecos = false;
if (txt.length > 0 && /[.?!]$/.test(txt)) {
debounceId = setTimeout(() => {
$(recommendationDivId).html(`
`);
$.getJSON("/recommend?prompt=" + encodeURIComponent(txt), (data) => {
if (stopRecos) return;
$(recommendationDivId).empty();
lastRecommendations = data;
graphData = generateGraph(lastRecommendations);
if (
(!data.add || data.add.length === 0) &&
(!data.remove || data.remove.length === 0)
) {
$(recommendationDivId).text("No recommendations found.");
} else {
const graphBtn = $(`
`);
graphBtn.on('click', () => toggleGraph(graphData, "graphBtn", 'afas'));
$(recommendationDivId).append(graphBtn);
}
if (data.remove && data.remove.length > 0) {
const rec = data.remove[0];
const sentence = rec.sentence.replaceAll("'", "\\'");
const valueEscaped = rec.value.replaceAll("'", "\\'");
const $tag = $(`
`);
// Removal recommendations
$tag.hover(
() => {
const cur = $(promptInputId).html();
$(promptInputId).data("prevHtml", cur);
$(promptInputId).html(
$(promptInputId).html().replace(
rec.sentence.trim(),
" " + rec.sentence.trim() + ""
)
)
},
() => {
const prev = $(promptInputId).data("prevHtml") || txt;
$(promptInputId).html(prev);
}
);
$tag.click(() => {
const updated = $(promptInputId)
.text()
.replace(rec.sentence, "")
.replace(/ {2,}/g, " ")
.trim();
$(promptInputId).text(updated);
selectedRecs.push({
'recommendation': { type: "remove", value: rec.value, sentence: rec.sentence },
'graphData': graphData,
});
$(recommendationDivId).empty();
$(promptInputId).trigger("input");
});
$(recommendationDivId).append($tag);
}
if (data.add && data.add.length > 0) {
data.add.forEach((rec) => {
if (!$(promptInputId).text().includes(rec.prompt)) {
const promptEscaped = rec.prompt.replaceAll("'", "\\'");
const valueEscaped = rec.value.replaceAll("'", "\\'");
const $tag = $(`
`);
// Addition recommendations
$tag.hover(
() => {
const cur = $(promptInputId).html();
$(promptInputId).data("prevHtml", cur);
$(promptInputId).html($(promptInputId).html() + " " + rec.prompt.trim() + "")
$(promptInputId).scrollTop($(promptInputId)[0].scrollHeight);
},
() => {
const prev = $(promptInputId).data("prevHtml") || txt;
$(promptInputId).html(prev);
}
);
$tag.click(() => {
const base =
$(promptInputId).data("prevHtml") ||
$(promptInputId).html().trim();
$(promptInputId).html((base + " " + rec.prompt).trim());
selectedRecs.push({
'recommendation': { type: "add", value: rec.value, sentence: rec.prompt },
'graphData': graphData,
});
$(recommendationDivId).empty();
$(promptInputId).trigger("input");
});
$(recommendationDivId).append($tag);
}
});
}
});
}, 500);
$(sendBtnId).on("click", function () {
stopRecos = true;
})
} else {
$(recommendationDivId).empty();
lastRecommendations = null;
}
}