Spaces:
Sleeping
Sleeping
| <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> |