File size: 5,966 Bytes
773f1d0 a4e21c7 773f1d0 a4e21c7 f148d6c a4e21c7 201b50b a4e21c7 b6e6f84 201b50b b6e6f84 a4e21c7 b6e6f84 a4e21c7 6c43dbf a4e21c7 6c43dbf f148d6c 8a83e83 f148d6c a4e21c7 f148d6c 201b50b f148d6c 201b50b 6c43dbf 201b50b a4e21c7 f148d6c 201b50b f148d6c a4e21c7 201b50b f148d6c eabf0ca 201b50b a4e21c7 f148d6c a4e21c7 201b50b f148d6c 201b50b f148d6c 201b50b f148d6c 201b50b a4e21c7 f148d6c 201b50b a4e21c7 f148d6c 201b50b f148d6c a4e21c7 f148d6c 201b50b f148d6c 201b50b f148d6c 201b50b a4e21c7 f148d6c a4e21c7 f148d6c 201b50b a4e21c7 6c43dbf a4e21c7 61f1b91 f148d6c a4e21c7 773f1d0 6c43dbf |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 |
<!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>
<!-- IBM Plex Sans -->
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&display=swap"
rel="stylesheet" />
<!-- Carbon CSS (for tabs and tags) -->
<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>
<!-- ===== Header: Title + Carbon Tabs ===== -->
<div class="header-container">
<div style="display: flex; flex-direction: row; gap: 2rem;">
<div style="display: flex; flex-direction: column; gap: 1rem;">
<h4 style="display: flex; padding-left: 1rem; font-size: xx-large; font-weight: 300; flex: 1;">Responsible Prompting</h4>
<select id="modelSelect"></select>
</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>
<!-- === Chat View === -->
<div id="chat-content">
<div id="chat" class="chat-container"></div>
<!-- Input area -->
<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>
<!-- Send button -->
<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 modelId = '';
document.addEventListener('DOMContentLoaded', () => {
// Populate the different models options
// id -> id of the model on HF, name -> name displayed to the user
const models = [
{ id: 'mistralai/Mistral-7B-Instruct-v0.3', name: 'Mistral 7B Instruct v0.3' },
{ id: 'meta-llama/Llama-4-Scout-17B-16E-Instruct', name: 'Llama 4 Scout' },
];
const modelSelect = document.getElementById('modelSelect');
models.forEach(model => {
const option = document.createElement('option');
option.value = model.id;
option.textContent = model.name;
modelSelect.appendChild(option);
});
// Set default selection
modelId = models[0].id;
// Record when model changes
modelSelect.addEventListener('change', function() {
const selectedModel = models.find(model => model.id === this.value);
modelId = selectedModel.id;
});
});
// To show the bottom of text in the prompt input box
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);
}
});
// // To generate recommendation when the page loads
$("#userInputDiv").trigger('input');
$("#sendBtn").on("click", () => {
const rawText = $("#userInputDiv").text() || "";
// Clear input box and recommendations
$("#userInputDiv").text("");
$("#recommendation").empty();
$("#sendBtn").attr("disabled", true);
// Generate LLM response
generateResponse(rawText, "#chat", "#sendBtn");
});
// Pressing Enter (without Shift) also sends
$("#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> |