|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import gradio as gr |
|
|
|
def chat_response(message, history): |
|
|
|
return f"Bot: You said: {message}" |
|
|
|
def submit_feedback(feedback): |
|
|
|
print(f"Received feedback: {feedback}") |
|
return "Thank you for your feedback!" |
|
|
|
|
|
custom_js = """ |
|
function showPopup() { |
|
document.getElementById('feedback-popup').style.display = 'block'; |
|
} |
|
|
|
function hidePopup() { |
|
document.getElementById('feedback-popup').style.display = 'none'; |
|
} |
|
|
|
function setupPopup() { |
|
var popup = document.createElement('div'); |
|
popup.id = 'feedback-popup'; |
|
popup.style.display = 'none'; |
|
popup.style.position = 'fixed'; |
|
popup.style.zIndex = '1000'; |
|
popup.style.left = '0'; |
|
popup.style.top = '0'; |
|
popup.style.width = '100%'; |
|
popup.style.height = '100%'; |
|
popup.style.overflow = 'auto'; |
|
popup.style.backgroundColor = 'rgba(0,0,0,0.4)'; |
|
|
|
var content = document.createElement('div'); |
|
content.style.backgroundColor = '#fefefe'; |
|
content.style.margin = '15% auto'; |
|
content.style.padding = '20px'; |
|
content.style.border = '1px solid #888'; |
|
content.style.width = '80%'; |
|
content.style.maxWidth = '600px'; |
|
|
|
popup.appendChild(content); |
|
document.body.appendChild(popup); |
|
|
|
// Move the feedback form into the popup |
|
var feedbackForm = document.getElementById('feedback-form'); |
|
content.appendChild(feedbackForm); |
|
|
|
// Close popup when clicking outside |
|
popup.onclick = function(event) { |
|
if (event.target == popup) { |
|
hidePopup(); |
|
} |
|
} |
|
} |
|
|
|
// Run setup when the page loads |
|
if (document.readyState === 'complete') { |
|
setupPopup(); |
|
} else { |
|
window.addEventListener('load', setupPopup); |
|
} |
|
""" |
|
|
|
with gr.Blocks(js=custom_js) as demo: |
|
gr.Markdown("# Simple Chatbot with Feedback Popup") |
|
gr.Markdown("This is a simple echo chatbot. Type a message and the bot will respond. You can also provide feedback.") |
|
|
|
chatbot = gr.Chatbot() |
|
msg = gr.Textbox() |
|
clear = gr.Button("Clear") |
|
feedback_btn = gr.Button("Provide Feedback", elem_id="feedback-btn") |
|
|
|
with gr.Column(visible=True, elem_id="feedback-form") as feedback_form: |
|
feedback_box = gr.Textbox(placeholder="Enter your feedback here...", label="Feedback") |
|
feedback_submit = gr.Button("Submit Feedback", elem_id="feedback-submit") |
|
response_box = gr.Textbox(label="Response", interactive=False) |
|
|
|
def user(user_message, history): |
|
return "", history + [[user_message, None]] |
|
|
|
def bot(history): |
|
bot_message = chat_response(history[-1][0], history) |
|
history[-1][1] = bot_message |
|
return history |
|
|
|
msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then( |
|
bot, chatbot, chatbot |
|
) |
|
clear.click(lambda: None, None, chatbot, queue=False) |
|
feedback_btn.click(None, None, None, js="showPopup") |
|
feedback_submit.click(submit_feedback, inputs=feedback_box, outputs=response_box).then( |
|
None, None, None, js="hidePopup" |
|
) |
|
|
|
demo.launch(server_port=7860, server_name="0.0.0.0", share=True, control_port=7861) |
