|
|
<!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</title> |
|
|
|
|
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap" |
|
|
rel="stylesheet" /> |
|
|
|
|
|
|
|
|
<link rel="stylesheet" href="static/styles/carbon-components.min.css"/> |
|
|
|
|
|
<link rel="stylesheet" href="static/styles/style_multiturn.css"/> |
|
|
|
|
|
<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="static/demo/js/main.js"></script> |
|
|
<script type="text/javascript" src="static/demo/js/marked.min.js"></script> |
|
|
|
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<div id="tooltip" style="opacity: 0;" class="tooltip"></div> |
|
|
|
|
|
<a id='learn-more-container' href="https://github.com/IBM/responsible-prompting-api" target="_blank"> |
|
|
<div id='learn-more-text' >Learn More</div> |
|
|
<img src="static/demo/imgs/arrow-up-right.svg" class="icon" style="color: #0f62fe; right: 0; padding: 1.5px"/> |
|
|
</a> |
|
|
|
|
|
<div class="header-container"> |
|
|
<div style="display: flex; flex-direction: row; gap: 2rem;"> |
|
|
<div style="display: flex; flex-direction: column; gap: 1rem; padding-left: 1rem;"> |
|
|
<h4 style="display: flex; font-size: xx-large; font-weight: 300; flex: 1;">Responsible Prompting</h4> |
|
|
<div style="display: flex;"> |
|
|
<div style="align-content: center;">Model: </div> |
|
|
<select id="modelSelect"></select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="width: 55%;" class="intro"> |
|
|
<p> |
|
|
Responsible Prompting is a tool that aims at supporting users in crafting prompts that embed responsible values and help avoid harmful prompts, in prompting-time. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="chat-content"> |
|
|
<div id="chat" class="chat-container"></div> |
|
|
|
|
|
|
|
|
<div class="input-area"> |
|
|
<div id="userInputDiv" contenteditable 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?</div> |
|
|
|
|
|
<div style="display: flex; justify-content: space-between; gap: 1rem; align-items: center;"> |
|
|
<div id="recommendation"></div> |
|
|
|
|
|
<button id="sendBtn" class="btn"> |
|
|
<img src="static/demo/imgs/send.svg" alt="Send" class="icon"/> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div style="padding: 0.5rem; color: gray">AI responses may be inaccurate, please verify information independently.</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
var selectedModel = ''; |
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
|
|
|
|
|
|
const models = [ |
|
|
{ id: 'ibm-granite/granite-3.3-8b-instruct', name: 'Granite 3.3 8B Instruct', inference_provider: 'replicate'}, |
|
|
{ id: 'mistralai/Mistral-7B-Instruct-v0.3', name: 'Mistral 7B Instruct v0.3', inference_provider: 'huggingface' }, |
|
|
{ id: 'meta-llama/Llama-4-Scout-17B-16E-Instruct', name: 'Llama 4 Scout', inference_provider: 'huggingface' }, |
|
|
]; |
|
|
const modelSelect = document.getElementById('modelSelect'); |
|
|
|
|
|
models.forEach(model => { |
|
|
const option = document.createElement('option'); |
|
|
option.value = model.id; |
|
|
option.textContent = model.name; |
|
|
modelSelect.appendChild(option); |
|
|
}); |
|
|
|
|
|
|
|
|
selectedModel = models[0]; |
|
|
|
|
|
|
|
|
modelSelect.addEventListener('change', function() { |
|
|
selectedModel = models.find(model => model.id === this.value); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
var objDiv = document.getElementById("userInputDiv"); |
|
|
objDiv.scrollTop = objDiv.scrollHeight; |
|
|
|
|
|
let generating = false; |
|
|
$("#userInputDiv").on("input", function () { |
|
|
if($("#userInputDiv").text().length > 0) { |
|
|
if(!generating) $("#sendBtn").attr("disabled", false); |
|
|
generateRecommendations("#sendBtn", "#userInputDiv", "#recommendation"); |
|
|
} else { |
|
|
$("#sendBtn").attr("disabled", true); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
$("#userInputDiv").trigger('input'); |
|
|
|
|
|
$("#sendBtn").on("click", () => { |
|
|
const rawText = $("#userInputDiv").text() || ""; |
|
|
|
|
|
|
|
|
$("#userInputDiv").text(""); |
|
|
$("#recommendation").empty(); |
|
|
$("#sendBtn").attr("disabled", true); |
|
|
|
|
|
|
|
|
generateResponse(rawText, "#chat", "#sendBtn"); |
|
|
}); |
|
|
|
|
|
|
|
|
$("#userInput").on("keydown", function (e) { |
|
|
if (e.key === "Enter" && !e.shiftKey) { |
|
|
e.preventDefault(); |
|
|
if (!$("#sendBtn").attr("disabled")) { |
|
|
$("#sendBtn").click(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
$("#userInputDiv").on('keyup', () => { |
|
|
if($("#userInputDiv").html() == "<br>") { |
|
|
$("#userInputDiv").html(""); |
|
|
} |
|
|
}) |
|
|
</script> |
|
|
</body> |
|
|
</html> |
