File size: 6,266 Bytes
83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 ffc2624 4d89605 ffc2624 4d89605 ffc2624 4d89605 ffc2624 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 83aabd5 4d89605 |
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 143 144 145 |
<!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; 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>
<!-- === 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 selectedModel = '';
document.addEventListener('DOMContentLoaded', () => {
// Populate the different models options
// id -> id of the model on HF, name -> name displayed to the user
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);
});
// Set default selection
selectedModel = models[0];
// Record when model changes
modelSelect.addEventListener('change', function() {
selectedModel = models.find(model => model.id === this.value);
});
});
// 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> |