github-starred/open-webui
2
0
Fork 0
mirror of https://github.com/open-webui/open-webui.git synced 2026-05-06 10:58:17 -05:00
Code Issues 1.3k Packages Projects Releases 126 Wiki Activity

[GH-ISSUE #6154] bug: artifact renders parts of content twice #52927

New Issue
Closed
opened 2026-05-05 14:08:21 -05:00 by GiteaMirror · 5 comments
GiteaMirror commented 2026-05-05 14:08:21 -05:00
Owner
Copy Link

Originally created by @Robotino04 on GitHub (Oct 13, 2024).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/6154

Bug Report

Installation Method

Docker

Environment

  • Open WebUI Version: v0.3.32
  • Ollama (if applicable): 0.3.9
  • Operating System: NixOS
  • Browser (if applicable): Firefox 130.0

Confirmation:

  • 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.
  • I have included the browser console logs.
  • I have included the Docker container logs.
  • 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:

<!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>&copy; 2023 My Website</p>
</div>

</body>
</html>

Logs and Screenshots

Browser Console Logs:

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>&copy; 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>&copy; 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>&copy; 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>&copy; 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:

Docker Container Logs:
N/A (frontend bug)

Screenshots/Screen Recordings (if applicable):
image

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!

Originally created by @Robotino04 on GitHub (Oct 13, 2024). Original GitHub issue: https://github.com/open-webui/open-webui/issues/6154 # Bug Report ## Installation Method Docker ## Environment - **Open WebUI 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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>&copy; 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!
GiteaMirror added the bug label 2026-05-05 14:08:22 -05:00
GiteaMirror commented 2026-05-05 14:08:31 -05:00
Author
Owner
Copy Link

@silentoplayz commented on GitHub (Oct 15, 2024):

Related PR which should include a fix - https://github.com/open-webui/open-webui/pull/6134

<!-- gh-comment-id:2412804026 --> @silentoplayz commented on GitHub (Oct 15, 2024): Related PR which should include a fix - https://github.com/open-webui/open-webui/pull/6134
GiteaMirror commented 2026-05-05 14:08:35 -05:00
Author
Owner
Copy Link

@TecReaGroup commented on GitHub (Nov 28, 2024):

image
I met the same question, and my friends too (only the models of Gemini face this problem). The codes are correct in Chrome and Edge HTML render, but not correctly work in artifacts. It's seemingly a bug of html rendering in artifacts or error processing of Gemini's outputs. But I don't know how to fix it. Can anyone help?

<!-- gh-comment-id:2505179753 --> @TecReaGroup commented on GitHub (Nov 28, 2024): ![image](https://github.com/user-attachments/assets/f7cf8328-4396-471a-840d-b320d567d1e7) I met the same question, and my friends too (only the models of Gemini face this problem). The codes are correct in Chrome and Edge HTML render, but not correctly work in artifacts. It's seemingly a bug of html rendering in artifacts or error processing of Gemini's outputs. But I don't know how to fix it. Can anyone help?
GiteaMirror commented 2026-05-05 14:08:36 -05:00
Author
Owner
Copy Link

@atgehrhardt commented on GitHub (Dec 10, 2024):

Taking a look at this. Seems to be the way Gemini outputs tags.

I may need to adjust the preprocessor logic, but I'd like not to have to create model specific definitions.

I'll look into this soon.

<!-- gh-comment-id:2532678584 --> @atgehrhardt commented on GitHub (Dec 10, 2024): Taking a look at this. Seems to be the way Gemini outputs tags. I may need to adjust the preprocessor logic, but I'd like not to have to create model specific definitions. I'll look into this soon.
GiteaMirror commented 2026-05-05 14:08:37 -05:00
Author
Owner
Copy Link

@bjj commented on GitHub (Mar 6, 2025):

Also happens to QwQ-32B (the new, non-preview one). It's not related to thinking, because like the submitter, I can reproduce this just by editing any model response to include this generated HTML:

Solar System HTML from QwQ-32B 
<!DOCTYPE html>
<html>
<head>
    <title>Inner Planets Orbiting the Sun</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #08132a;
        }

        #solarSystem {
            position: relative;
            width: 400px;
            height: 400px;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.1);
        }

        .sun {
            position: absolute;
            width: 50px;
            height: 50px;
            background-color: #ffec00;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 40px #ffec00;
        }

        .planet {
            position: absolute;
            top: 50%;
            left: 50%;
            border-radius: 50%;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            transform-origin: center;
        }

        /* Mercury */
        .mercury {
            width: 15px;
            height: 15px;
            background-color: #808080;
            animation-name: orbit-mercury;
            animation-duration: 5s;
        }

        @keyframes orbit-mercury {
            0% { transform: rotate(0deg) translate(60px); }
            100% { transform: rotate(360deg) translate(60px); }
        }

        /* Venus */
        .venus {
            width: 20px;
            height: 20px;
            background-color: #c4906e;
            animation-name: orbit-venus;
            animation-duration: 10s;
        }

        @keyframes orbit-venus {
            0% { transform: rotate(0deg) translate(100px); }
            100% { transform: rotate(360deg) translate(100px); }
        }

        /* Earth */
        .earth {
            width: 25px;
            height: 25px;
            background-color: #2176ff;
            animation-name: orbit-earth;
            animation-duration: 20s;
        }

        @keyframes orbit-earth {
            0% { transform: rotate(0deg) translate(140px); }
            100% { transform: rotate(360deg) translate(140px); }
        }

        /* Mars */
        .mars {
            width: 22px;
            height: 22px;
            background-color: #ff4d00;
            animation-name: orbit-mars;
            animation-duration: 30s;
        }

        @keyframes orbit-mars {
            0% { transform: rotate(0deg) translate(180px); }
            100% { transform: rotate(360deg) translate(180px); }
        }
    </style>
</head>
<body>
    <div id="solarSystem">
        <div class="sun"></div>
        <div class="mercury planet"></div>
        <div class="venus planet"></div>
        <div class="earth planet"></div>
        <div class="mars planet"></div>
    </div>
</body>
</html>
<!-- gh-comment-id:2704465405 --> @bjj commented on GitHub (Mar 6, 2025): Also happens to QwQ-32B (the new, non-preview one). It's not related to thinking, because like the submitter, I can reproduce this just by editing any model response to include this generated HTML: <details> <summary>Solar System HTML from QwQ-32B</summary> ``` <!DOCTYPE html> <html> <head> <title>Inner Planets Orbiting the Sun</title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #08132a; } #solarSystem { position: relative; width: 400px; height: 400px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); } .sun { position: absolute; width: 50px; height: 50px; background-color: #ffec00; border-radius: 50%; top: 50%; left: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 40px #ffec00; } .planet { position: absolute; top: 50%; left: 50%; border-radius: 50%; animation-timing-function: linear; animation-iteration-count: infinite; transform-origin: center; } /* Mercury */ .mercury { width: 15px; height: 15px; background-color: #808080; animation-name: orbit-mercury; animation-duration: 5s; } @keyframes orbit-mercury { 0% { transform: rotate(0deg) translate(60px); } 100% { transform: rotate(360deg) translate(60px); } } /* Venus */ .venus { width: 20px; height: 20px; background-color: #c4906e; animation-name: orbit-venus; animation-duration: 10s; } @keyframes orbit-venus { 0% { transform: rotate(0deg) translate(100px); } 100% { transform: rotate(360deg) translate(100px); } } /* Earth */ .earth { width: 25px; height: 25px; background-color: #2176ff; animation-name: orbit-earth; animation-duration: 20s; } @keyframes orbit-earth { 0% { transform: rotate(0deg) translate(140px); } 100% { transform: rotate(360deg) translate(140px); } } /* Mars */ .mars { width: 22px; height: 22px; background-color: #ff4d00; animation-name: orbit-mars; animation-duration: 30s; } @keyframes orbit-mars { 0% { transform: rotate(0deg) translate(180px); } 100% { transform: rotate(360deg) translate(180px); } } </style> </head> <body> <div id="solarSystem"> <div class="sun"></div> <div class="mercury planet"></div> <div class="venus planet"></div> <div class="earth planet"></div> <div class="mars planet"></div> </div> </body> </html> ``` </details>
GiteaMirror commented 2026-05-05 14:08:39 -05:00
Author
Owner
Copy Link

@silentoplayz commented on GitHub (Oct 9, 2025):

Should be solved with https://github.com/open-webui/open-webui/pull/18195. Testing wanted!

<!-- gh-comment-id:3387424743 --> @silentoplayz commented on GitHub (Oct 9, 2025): Should be solved with https://github.com/open-webui/open-webui/pull/18195. Testing wanted!
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
bug
confirmed
confirmed issue
core
documentation
enhancement
good first issue
help wanted
non-core
pull-request
Mirrored from GitHub Pull Request
 python
question
testing wanted
No Label bug
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
GiteaMirror ninjasurge
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: github-starred/open-webui#52927
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?