open webui 渲染错误 | 初步判断与 gemini 可能有关

TRG · 2024 年11 月 28 日 02:50

在artifacts渲染html，会生成两遍，怎么解决。。。edge和chrome都是这样，也没看到相关配置。。。

yangtb2024 · 2024 年11 月 28 日 02:51

不知道耶，看看

Yuccc · 2024 年11 月 28 日 02:58

额…html好像渲染有BUG…我和楼主也一样
不过SVG貌似倒是正常的

TRG · 2024 年11 月 28 日 03:05

github.com/open-webui/open-webui

bug: artifact renders parts of content twice

已打开 12:12AM - 13 Oct 24 UTC

Robotino04

# Bug Report ## Installation Method Docker ## Environment - **Open W…ebUI Version:** v0.3.32 - **Ollama (if applicable):** 0.3.9 - **Operating System:** NixOS - **Browser (if applicable):** Firefox 130.0 **Confirmation:** - [x] I have read and followed all the instructions provided in the README.md. - [ ] I am on the latest version of both Open WebUI and Ollama. - [x] I have included the browser console logs. - [ ] I have included the Docker container logs. - [x] I have provided the exact steps to reproduce the bug in the "Steps to Reproduce" section below. ## Expected Behavior: The content renders once. ## Actual Behavior: Some of the content is rendered twice. ## Description **Bug Summary:** The artifacts view sometimes renders parts twice. ## Reproduction Details **Steps to Reproduce:** Prompt a model with "Show me a code snippet of a website's sticky header and footer please." and open the artifact view. Alternatively replace some other artifact's code with the following and save: ```html <!DOCTYPE html> <html> <head> <style> body { margin: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 20px; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 20px; } .content { margin-top: 80px; /* Account for header height */ margin-bottom: 60px; /* Account for footer height */ padding: 20px; } </style> </head> <body> <div class="header"> <h1>My Website</h1> </div> <div class="content"> <h2>Welcome to my website!</h2> <p>This is some example content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h3>What We Offer</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <ul> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul> </div> <div class="footer"> <p>© 2023 My Website</p> </div> </body> </html> ``` ## Logs and Screenshots **Browser Console Logs:** <details> <summary>Logs</summary> ```logs Backend config: Object { status: true, name: "Open WebUI", version: "0.3.32", default_locale: "", oauth: {…}, features: {…}, default_models: "llama3.1:latest", default_prompt_suggestions: (7) […], audio: {…}, file: {…}, … } +layout.svelte:104:11 connected pOcnL3j12Y614h7XAAAF +layout.svelte:58:11 user-count Object { count: 1 } +layout.svelte:77:11 usage Object { models: [] } +layout.svelte:82:11 Array(4) [ {…}, {…}, {…}, {…} ] index.ts:64:9 2e68770f-bb1e-492e-9738-a2ceb63708d6 Chat.svelte:121:11 Object { id: "", title: "Sticky Header & Footer 📌 \n", models: (1) […], system: "# Response\nIn code blocks, abbreviate repetitive code if it was already written out fully in a previous response (this excludes html, css and js as those have a live preview and need to be complete for that)\n\nIf the user asks a question in a language other than English, still answer in English and only use other languages if that is the subject (for example, you are asked to translate something).\n\n# Context\nAlways consult the context if available.\nDo not mention the use of context in your response, only mention if you explicitly don't use the context.\nTrust that any context given to you by the system is accurate and up to date.", params: {}, history: {…}, tags: [], timestamp: 1728775093071, messages: (4) […], files: [] } Chat.svelte:411:12 UserMessage mounted UserMessage.svelte:85:10 <!DOCTYPE html> <html> <head> <style> body { margin: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 20px; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 20px; } .content { margin-top: 80px; /* Account for header height */ margin-bottom: 60px; /* Account for footer height */ padding: 20px; } </style> </head> <body> <div class="header"> <h1>My Website</h1> </div> <div class="content"> <h2>Welcome to my website!</h2> <p>This is some example content.</p> </div> <div class="footer"> <p>© 2023 My Website</p> </div> </body> </html> CodeEditor.svelte:112:10 codeblock html <!DOCTYPE html> <html> <head> <style> body { margin: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 20px; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 20px; } .content { margin-top: 80px; /* Account for header height */ margin-bottom: 60px; /* Account for footer height */ padding: 20px; } </style> </head> <body> <div class="header"> <h1>My Website</h1> </div> <div class="content"> <h2>Welcome to my website!</h2> <p>This is some example content.</p> </div> <div class="footer"> <p>© 2023 My Website</p> </div> </body> </html> CodeBlock.svelte:277:10 ResponseMessage mounted ResponseMessage.svelte:328:10 UserMessage mounted UserMessage.svelte:85:10 <!DOCTYPE html> <html> <head> <style> body { margin: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 20px; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 20px; } .content { margin-top: 80px; /* Account for header height */ margin-bottom: 60px; /* Account for footer height */ padding: 20px; } </style> </head> <body> <div class="header"> <h1>My Website</h1> </div> <div class="content"> <h2>Welcome to my website!</h2> <p>This is some example content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h3>What We Offer</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <ul> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul> </div> <div class="footer"> <p>© 2023 My Website</p> </div> </body> </html> CodeEditor.svelte:112:10 codeblock html <!DOCTYPE html> <html> <head> <style> body { margin: 0; } .header { position: fixed; top: 0; left: 0; width: 100%; background-color: #f1f1f1; padding: 20px; } .footer { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 20px; } .content { margin-top: 80px; /* Account for header height */ margin-bottom: 60px; /* Account for footer height */ padding: 20px; } </style> </head> <body> <div class="header"> <h1>My Website</h1> </div> <div class="content"> <h2>Welcome to my website!</h2> <p>This is some example content. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <h3>What We Offer</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p> <ul> <li>Service 1</li> <li>Service 2</li> <li>Service 3</li> </ul> </div> <div class="footer"> <p>© 2023 My Website</p> </div> </body> </html> CodeBlock.svelte:277:10 ResponseMessage mounted ResponseMessage.svelte:328:10 An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can remove its sandboxing. 2e68770f-bb1e-492e-9738-a2ceb63708d6 This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see https://firefox-source-docs.mozilla.org/performance/scroll-linked_effects.html for further details and to join the discussion on related tools and features! 2e68770f-bb1e-492e-9738-a2ceb63708d6 Object { models: (1) […] } SettingsModal.svelte:24:10 Array(4) [ {…}, {…}, {…}, {…} ] index.ts:64:9 Object { current: "0.3.32", latest: "0.3.32" } About.svelte:30:10 false About.svelte:33:10 Source map error: Error: URL constructor: is not a valid URL. Resource URL: about:srcdoc Source Map URL: 14 Source map error: Error: URL constructor: is not a valid URL. Resource URL: null Source Map URL: ``` </details> **Docker Container Logs:** N/A (frontend bug) **Screenshots/Screen Recordings (if applicable):** ![image](https://github.com/user-attachments/assets/7a3f923c-37f2-4bbf-9eaa-de97ec8a959e) ## Additional Information It renders correctly if the `<html>` opening and closing tags are removed. I suspect that everything is rendered twice, but only the non-header and non-footer parts are visible twice because those have `position: fixed` and are just overlapping themselves, but I have no way of testing that. ## Note If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!

有人提交了bug，但是dev的回复有点没看懂。。。而且快两个月了也没有回复。。。

eguhz99 · 2024 年11 月 28 日 03:24

这个清理浏览器缓存有用吗？感觉openwebui还挺多需要优化的

Yuccc · 2024 年11 月 28 日 03:26

开了无痕还是不行哦

fl0w1nd · 2024 年11 月 28 日 04:30

我没遇到这个问题，版本v0.4.6

Yuccc · 2024 年11 月 28 日 05:36

我也是0.4.6
刚又试了一下,貌似只有gemini-exp-1121生成的代码渲染有问题…
我换其他模型是没问题的

TRG · 2024 年11 月 28 日 07:34

我试了一下gemini全系都会这样，别的gpt claud grok好像没这个问题

TRG · 2024 年11 月 28 日 07:54

这么说 artifacts 是实现有点奇怪的，居然会受到 model 的直接或者间接影响

Yuccc · 2024 年11 月 28 日 07:58

没看过源码…我也觉得很奇怪

fl0w1nd · 2024 年11 月 28 日 08:03

没问题啊，同样是Gemini模型

TRG · 2024 年11 月 28 日 08:04

看了一下，gemimi只有在workspace中被选择，目前推测可能是gemini会有一些特殊的响应消息，或者在api转换中出现了奇怪的信息，导致artifact渲染时参数错误，排查方向：1,测试直接官方api 2,对比与其他模型响应会有什么区别。太奇怪了，artifact一应该只渲染save部分代码，与模型无关，看来可能有奇奇怪怪的接口被传参了

TRG · 2024 年11 月 28 日 08:05

有用 new api吗？

Reno · 2024 年11 月 28 日 08:06

可能是最后一条数据块有汇总，以前遇到过

TRG · 2024 年11 月 28 日 08:06

可以再展开说一下吗？

Reno · 2024 年11 月 28 日 08:07

我没看猜的像这样
我
是
猫，我是猫

TRG · 2024 年11 月 28 日 08:14

看了一下，表面输出没什么问题，标准md语法，和html代码块，没有多余信息

fl0w1nd · 2024 年11 月 28 日 08:19

用了,new-api中转

话题		回复	浏览量
open webui有2个问题求助开发调优 OpenWebUI , 快问快答	3	333	2024 年11 月 2 日
Openwebui默认关闭Artifacts了吗？搞七捻三 ChatGPT , OpenAI , 人工智能 , 快问快答	5	243	2024 年12 月 1 日
问：关于OpenWebUI 报错开发调优快问快答	15	344	2024 年11 月 5 日
在open webui 的Artifacts中使用vue3+element plus 组件库开发调优人工智能 , 纯水	8	261	2024 年12 月 14 日
【已解决】【求助】这是1panel的问题还是chrome的问题？开发调优快问快答	8	133	2024 年11 月 29 日

open webui 渲染错误 | 初步判断与 gemini 可能有关

相关话题