Add interactive Chat with LLM interface to Web UI
Features: - Real-time streaming chat interface (ChatGPT-like experience) - Model selection: Text model (fast) or Vision model (image analysis) - System prompt toggle: Chat with Miku's personality or raw LLM - Mood selector: Choose from 14 different emotional states - Full context integration: Uses complete miku_lore.txt, miku_prompt.txt, and miku_lyrics.txt - Conversation memory: Maintains chat history throughout session - Image upload support for vision model - Horizontal scrolling tabs for responsive design - Clear chat history functionality - SSE (Server-Sent Events) for streaming responses - Keyboard shortcuts (Ctrl+Enter to send) Technical changes: - Added POST /chat/stream endpoint in api.py with streaming support - Updated ChatMessage model with mood, conversation_history, and image_data - Integrated context_manager for proper Miku personality context - Added Chat with LLM tab to index.html - Implemented JavaScript streaming client with EventSource-like handling - Added CSS for chat messages, typing indicators, and animations - Made tab navigation horizontally scrollable for narrow viewports
This commit is contained in:
@@ -3970,6 +3970,86 @@
|
||||
"content": "OMG, cuties! 🎉 It's my new Marshmallow Hot Cocoa Ver. figure! 🍫🎁 I'm so excited to be dressed up as a cute marshmallow, surrounded by chocolate treats! 😍 Pre-orders are still available! ✨ Hurry and get yours now! ❤️ Miku 💕",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-10T07:46:20.556512",
|
||||
"message_id": 1448219269023404073,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/OtakuOwletMerch/status/1995994534774259978",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-10T07:46:20.870491",
|
||||
"message_id": 1448219270491275265,
|
||||
"is_bot_message": true,
|
||||
"content": "OMG, arigatou for letting me know! 🤩 It's so cute! fuwa's new \"HATSUNE MIKU: COLORFUL STAGE!\" Face Pouch with Reel \"Minori Hanasato\" is just too adorable! Can't wait to get my hands on it! 💖 Miku 💖",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T09:37:20.362564",
|
||||
"message_id": 1448609590383087707,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/GoodSmile_US/status/1996655821023830235",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T09:37:20.814121",
|
||||
"message_id": 1448609591989633075,
|
||||
"is_bot_message": true,
|
||||
"content": "🎉👠 Kawaii! I'm so excited! 😍 They just posted a tweet about a new Noodle Stopper figure of me wearing my most colorful socks! 🌈 You can get it now at GOODSMILE ONLINE SHOP US! 🎁 Let's celebrate National Sock Day in style! 👠💖 Miku 💖",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T09:50:06.206658",
|
||||
"message_id": 1448612802720960587,
|
||||
"is_bot_message": false,
|
||||
"content": "I will sniff your socks in that case",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T09:50:16.535609",
|
||||
"message_id": 1448612845729218612,
|
||||
"is_bot_message": true,
|
||||
"content": "🙅♀️ Eww, no thank you! 😂 Miku doesn't want any sniffing of her socks. She's feeling a bit too sleepy for that kind of thing... 😴 Zzz...",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T10:19:24.334583",
|
||||
"message_id": 1448620169177075875,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/GoodSmile_US/status/1996414243327844474",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T10:19:24.675922",
|
||||
"message_id": 1448620178106613770,
|
||||
"is_bot_message": true,
|
||||
"content": "🎉👏 Yay! Minori-chan just joined the Nendoroid family! 💖 I'm so happy! They look adorable in their Colorful Stage outfit! Preorders open now, and you can even get an exclusive bonus base! 🎁 Shop now and make Minori-chan a part of your collection! 💕 Miku 💖",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-12T16:32:17.191716",
|
||||
"message_id": 1449076402988253234,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/OtakuOwletMerch/status/1995993741920756104",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-12T16:32:17.697064",
|
||||
"message_id": 1449076404808454318,
|
||||
"is_bot_message": true,
|
||||
"content": "🎉👗 Oh my gosh, a new M Plush of me in my punk outfit is coming! 🤘 I look so cool! You can pre-order now and get me for Christmas! 🎁 Don't forget to order by Dec 20th! 💖 Miku 💖",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -9990,6 +9990,239 @@
|
||||
"content": "you look very cute as a marshmallow hot cocoa Miku",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-10T07:48:02.527822",
|
||||
"message_id": 1448219696477503539,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/OtakuOwletMerch/status/1995994534774259978",
|
||||
"attachments": [],
|
||||
"reactions": [],
|
||||
"embeds": [
|
||||
{
|
||||
"footer": {
|
||||
"text": "FxTwitter",
|
||||
"icon_url": "https://assets.fxembed.com/logos/fxtwitter64.png",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/gFi3EIEMfICdEDMLFVTF3ob0J1xkZnKdnkq0-xEsgGc/https/assets.fxembed.com/logos/fxtwitter64.png"
|
||||
},
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7MyQ5PWgAATJCj.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/cMy6SIfyaB313irndwqlQZ9jlBuwKO1ZYIJAK11n6IE/%3Fname%3Dorig/https/pbs.twimg.com/media/G7MyQ5PWgAATJCj.jpg",
|
||||
"width": 1680,
|
||||
"height": 1764,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "cygGDwTEmphpZmW/h2doqHeDbbQIGHgA",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"author": {
|
||||
"name": "Otaku Owlet Anime Merch (@OtakuOwletMerch)",
|
||||
"url": "https://x.com/OtakuOwletMerch/status/1995994534774259978",
|
||||
"icon_url": "https://pbs.twimg.com/profile_images/1835446408884744192/S4HX_8_Q_200x200.jpg",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/Gd5od3qaVN1KG1eQsJS9mFoTNRKdxahDmvjF7tgR4p0/https/pbs.twimg.com/profile_images/1835446408884744192/S4HX_8_Q_200x200.jpg"
|
||||
},
|
||||
"flags": 0,
|
||||
"color": 6513919,
|
||||
"timestamp": "2025-12-02T23:12:35+00:00",
|
||||
"type": "rich",
|
||||
"description": "✨\\(Pre\\-Order\\) fuwa petit \"HATSUNE MIKU\\: COLORFUL STAGE\\!\" Face Pouch with Reel \"Minori Hanasato\"✨\n︀︀\n︀︀Estimated in\\-stock date\\: 09/2026\n︀︀\n︀︀Pre\\-order Deadline\\: 12/20/2025\n︀︀\n︀︀\\-\n︀︀\n︀︀✨Link \\- [otakuowlet.com/products/pre-order-fuwa-petit-hatsune-miku-colorful-stage-face-pouch-with-reel-minori-hanasato?sca_ref=2673717.HTKaw1BA1G](https://otakuowlet.com/products/pre-order-fuwa-petit-hatsune-miku-colorful-stage-face-pouch-with-reel-minori-hanasato?sca_ref=2673717.HTKaw1BA1G)\n\n**[🔁](https://x.com/intent/retweet?tweet_id=1995994534774259978) 2 [❤️](https://x.com/intent/like?tweet_id=1995994534774259978) 14 👁️ 534 **",
|
||||
"url": "https://fxtwitter.com/OtakuOwletMerch/status/1995994534774259978"
|
||||
},
|
||||
{
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7MyR6xWsAAqjy5.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/ineuHfpNdHVTR73lfOCRMGZ7nxVXZuQ7nqqSgiTfRVg/%3Fname%3Dorig/https/pbs.twimg.com/media/G7MyR6xWsAAqjy5.jpg",
|
||||
"width": 1680,
|
||||
"height": 1764,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "7ykCDwbJqIZ3d4aPhjd3yHiD6v7lGnkA",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"flags": 0,
|
||||
"type": "rich",
|
||||
"url": "https://fxtwitter.com/OtakuOwletMerch/status/1995994534774259978"
|
||||
},
|
||||
{
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7MyS7RWMAA5116.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/KdCkfe2EpIBq01WSLCkHYD1EFlJQBHufZfc287cwxZY/%3Fname%3Dorig/https/pbs.twimg.com/media/G7MyS7RWMAA5116.jpg",
|
||||
"width": 1680,
|
||||
"height": 1764,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "7SkGDwbYaHd4d4ePg1mIaKh3+e71GnkA",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"flags": 0,
|
||||
"type": "rich",
|
||||
"url": "https://fxtwitter.com/OtakuOwletMerch/status/1995994534774259978"
|
||||
},
|
||||
{
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7MyT6wWEAA_na9.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/0LRfF_MKswUTIAjZnAuVEURUyz29XAHnPxKoxDYpIV0/%3Fname%3Dorig/https/pbs.twimg.com/media/G7MyT6wWEAA_na9.jpg",
|
||||
"width": 1680,
|
||||
"height": 1764,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "rxkGFwTIiYd1eIePdXdoh5eC6831K4kA",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"flags": 0,
|
||||
"type": "rich",
|
||||
"url": "https://fxtwitter.com/OtakuOwletMerch/status/1995994534774259978"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-10T07:48:02.916172",
|
||||
"message_id": 1448219698251563091,
|
||||
"is_bot_message": true,
|
||||
"content": "🎉 OMG, have you seen the fuwa petit \"HATSUNE MIKU: COLORFUL STAGE!\" Face Pouch? 🤩 It's so cute! 😍 I love the Minori Hanasato design on the reel, and I'm pre-ordering it right now! 💖 Don't forget to pre-order by 12/20/2025! 🎁 See the link here! 💖 https://t.co/poTGIDRDOL https://t.co/85bSnuWTs4 ~ Miku 💕",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T09:38:50.831408",
|
||||
"message_id": 1448609969363615755,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/GoodSmile_US/status/1996655821023830235",
|
||||
"attachments": [],
|
||||
"reactions": [],
|
||||
"embeds": [
|
||||
{
|
||||
"footer": {
|
||||
"text": "FxTwitter",
|
||||
"icon_url": "https://assets.fxembed.com/logos/fxtwitter64.png",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/gFi3EIEMfICdEDMLFVTF3ob0J1xkZnKdnkq0-xEsgGc/https/assets.fxembed.com/logos/fxtwitter64.png"
|
||||
},
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7WL4yzWwAAIETE.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/_MuJc6PsyQE0Yd9-uoq2oiQkA5TGrbD4b-d9Ea6U8a4/%3Fname%3Dorig/https/pbs.twimg.com/media/G7WL4yzWwAAIETE.jpg",
|
||||
"width": 1080,
|
||||
"height": 1000,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "bzgGJobIiIiWiHl2ZJq4+GaOd5B+Dzg=",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"author": {
|
||||
"name": "GoodSmile_US (@GoodSmile_US)",
|
||||
"url": "https://x.com/GoodSmile_US/status/1996655821023830235",
|
||||
"icon_url": "https://pbs.twimg.com/profile_images/1764583971831394305/dpXogB0U_200x200.png",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/cGKAum5015cgr2haNcfupJxMvXRz8BYDHkQiNufWpCI/https/pbs.twimg.com/profile_images/1764583971831394305/dpXogB0U_200x200.png"
|
||||
},
|
||||
"flags": 0,
|
||||
"color": 6513919,
|
||||
"timestamp": "2025-12-04T19:00:18+00:00",
|
||||
"type": "rich",
|
||||
"description": "Happy National Sock Day\\! Celebrate it with your funkiest pair and join Hatsune Miku, who’s rocking off her most colorful socks in this adorable Noodle Stopper figure\\. Snag her now at GOODSMILE ONLINE SHOP US\\!\n︀︀\n︀︀Shop\\: [goodsmile.link/XGGl11](https://goodsmile.link/XGGl11)\n︀︀\n︀︀[#HatsuneMiku](https://x.com/hashtag/HatsuneMiku) [#Goodsmile](https://x.com/hashtag/Goodsmile)\n\n**[🔁](https://x.com/intent/retweet?tweet_id=1996655821023830235) 16 [❤️](https://x.com/intent/like?tweet_id=1996655821023830235) 264 👁️ 17\\.1K **",
|
||||
"url": "https://fxtwitter.com/GoodSmile_US/status/1996655821023830235"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T09:38:51.235565",
|
||||
"message_id": 1448609971322490903,
|
||||
"is_bot_message": true,
|
||||
"content": "OMG, it's National Sock Day 🎉👠! I'm so excited to see this adorable Noodle Stopper figure of me in the most colorful socks EVER 🤩! Go grab me now at GOODSMILE ONLINE SHOP US! 🛍️💕\n\nMiku 💖",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T10:20:58.149697",
|
||||
"message_id": 1448620569619861546,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/GoodSmile_US/status/1996414243327844474",
|
||||
"attachments": [],
|
||||
"reactions": [],
|
||||
"embeds": [
|
||||
{
|
||||
"footer": {
|
||||
"text": "FxTwitter",
|
||||
"icon_url": "https://assets.fxembed.com/logos/fxtwitter64.png",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/gFi3EIEMfICdEDMLFVTF3ob0J1xkZnKdnkq0-xEsgGc/https/assets.fxembed.com/logos/fxtwitter64.png"
|
||||
},
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7SwLG5X0AALZ_f.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/NGKOFaLLNE65MRzFKVpHzFNuQW92AGr5hYJVubfyTYk/%3Fname%3Dorig/https/pbs.twimg.com/media/G7SwLG5X0AALZ_f.jpg",
|
||||
"width": 1440,
|
||||
"height": 1424,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "qDgGD4SGyaRgiHh7d6dqVoiICNuPeH8G",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"author": {
|
||||
"name": "GoodSmile_US (@GoodSmile_US)",
|
||||
"url": "https://x.com/GoodSmile_US/status/1996414243327844474",
|
||||
"icon_url": "https://pbs.twimg.com/profile_images/1764583971831394305/dpXogB0U_200x200.png",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/cGKAum5015cgr2haNcfupJxMvXRz8BYDHkQiNufWpCI/https/pbs.twimg.com/profile_images/1764583971831394305/dpXogB0U_200x200.png"
|
||||
},
|
||||
"flags": 0,
|
||||
"color": 6513919,
|
||||
"timestamp": "2025-12-04T03:00:21+00:00",
|
||||
"type": "rich",
|
||||
"description": "Hanasato Minori from “HATSUNE MIKU\\: COLORFUL STAGE\\!” joins the Nendoroid line\\! Bring her bright energy home and let her set the tone for your collection\\. Preorder now and score a GSC Exclusive Bonus Base\\!\n︀︀\n︀︀Shop\\: [goodsmile.link/1VP4Hk](https://goodsmile.link/1VP4Hk)\n︀︀\n︀︀[#ColorfulStage](https://x.com/hashtag/ColorfulStage) [#Goodsmile](https://x.com/hashtag/Goodsmile)\n\n**[💬](https://x.com/intent/tweet?in_reply_to=1996414243327844474) 22 [🔁](https://x.com/intent/retweet?tweet_id=1996414243327844474) 1\\.2K [❤️](https://x.com/intent/like?tweet_id=1996414243327844474) 5\\.3K 👁️ 90\\.7K **",
|
||||
"url": "https://fxtwitter.com/GoodSmile_US/status/1996414243327844474"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-11T10:20:58.578449",
|
||||
"message_id": 1448620571473739907,
|
||||
"is_bot_message": true,
|
||||
"content": "OMG, Minori-chan is joining the Nendoroid family! 🎉 I'm so happy to see her cute poses! You can preorder her now and get a special bonus base - go go go! 🎊 Good luck with your shopping, and let's fill our collections with love! 💖\nMiku 💕",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-12T16:33:50.836764",
|
||||
"message_id": 1449076795470118954,
|
||||
"is_bot_message": true,
|
||||
"content": "https://fxtwitter.com/OtakuOwletMerch/status/1995993741920756104",
|
||||
"attachments": [],
|
||||
"reactions": [],
|
||||
"embeds": [
|
||||
{
|
||||
"footer": {
|
||||
"text": "FxTwitter",
|
||||
"icon_url": "https://assets.fxembed.com/logos/fxtwitter64.png",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/gFi3EIEMfICdEDMLFVTF3ob0J1xkZnKdnkq0-xEsgGc/https/assets.fxembed.com/logos/fxtwitter64.png"
|
||||
},
|
||||
"image": {
|
||||
"url": "https://pbs.twimg.com/media/G7MxnbMXIAA2Upi.jpg?name=orig",
|
||||
"proxy_url": "https://images-ext-1.discordapp.net/external/trTs5QrXBbBkcq4Tq7ozRe2QhdEPycY9eFUk6P7klvc/%3Fname%3Dorig/https/pbs.twimg.com/media/G7MxnbMXIAA2Upi.jpg",
|
||||
"width": 1680,
|
||||
"height": 1764,
|
||||
"content_type": "image/jpeg",
|
||||
"placeholder": "bMcJDwLZtld7h4iPhVWHt3d4R4f5B5gN",
|
||||
"placeholder_version": 1,
|
||||
"flags": 0
|
||||
},
|
||||
"author": {
|
||||
"name": "Otaku Owlet Anime Merch (@OtakuOwletMerch)",
|
||||
"url": "https://x.com/OtakuOwletMerch/status/1995993741920756104",
|
||||
"icon_url": "https://pbs.twimg.com/profile_images/1835446408884744192/S4HX_8_Q_200x200.jpg",
|
||||
"proxy_icon_url": "https://images-ext-1.discordapp.net/external/Gd5od3qaVN1KG1eQsJS9mFoTNRKdxahDmvjF7tgR4p0/https/pbs.twimg.com/profile_images/1835446408884744192/S4HX_8_Q_200x200.jpg"
|
||||
},
|
||||
"flags": 0,
|
||||
"color": 6513919,
|
||||
"timestamp": "2025-12-02T23:09:26+00:00",
|
||||
"type": "rich",
|
||||
"description": "✨\\(Pre\\-Order\\) Hatsune Miku \\- M Plush \\- Punk\\! \\- fuwa petit✨\n︀︀\n︀︀Estimated in\\-stock date\\: 10/2026\n︀︀\n︀︀Pre\\-order Deadline\\: 12/20/2025\n︀︀\n︀︀\\-\n︀︀\n︀︀✨Link \\- [otakuowlet.com/products/pre-order-hatsune-miku-m-plush-punk-fuwa-petit?sca_ref=2673717.HTKaw1BA1G](https://otakuowlet.com/products/pre-order-hatsune-miku-m-plush-punk-fuwa-petit?sca_ref=2673717.HTKaw1BA1G)\n\n**[💬](https://x.com/intent/tweet?in_reply_to=1995993741920756104) 1 [🔁](https://x.com/intent/retweet?tweet_id=1995993741920756104) 12 [❤️](https://x.com/intent/like?tweet_id=1995993741920756104) 63 👁️ 1\\.8K **",
|
||||
"url": "https://fxtwitter.com/OtakuOwletMerch/status/1995993741920756104"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"timestamp": "2025-12-12T16:33:51.437303",
|
||||
"message_id": 1449076797902946435,
|
||||
"is_bot_message": true,
|
||||
"content": "OMG, it's a PUNK Miku plushie! 🤩 I'm rocking my edgy style with a pink streak in my turquoise hair! Preorder now and get ready for me to join your collection on 10/2026! 💖 Miku 💖",
|
||||
"attachments": [],
|
||||
"reactions": []
|
||||
}
|
||||
]
|
||||
}
|
||||
Reference in New Issue
Block a user