Closed
Description
What happened?
I used OpenAI image generation, and when I click on the image to show it in full size, and then on top right Download icon, it downloads a .png file that is ~4.6kB. Upon inspection, I see it has HTML code inside and is not a valid PNG
I was able to reproduce this in Firefox only, in Chrome it works as expected.
Version Information
ghcr.io/danny-avila/librechat-dev latest 45865149dbf3 2 days ago 1.06GB
Steps to Reproduce
I am using Firefox on Ubuntu 24.04 - on Chrome I was not able to reproduce this, it works as intended.
- use agent with OpenAI tools to generate an image
- open the image modal
- click on the download icon
- inspect the downloaded PNG file
Upon checking network tools the URL called was:
/images/66c846f7809c9f24886b9058/8277a4e8-8e19-4be1-bb93-3460c8c72ee3-image_gen_oai_call_5HvHH0emQrgZr58pUdZMTYaS_img_L4JPdW7MKjcelkofWsy-z.png
The response was 200 OK, text/html; charset=UTF-8
The contents of the downloaded png file are:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<meta name="theme-color" content="#171717" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<meta name="description" content="LibreChat - An open source chat application with support for multiple AI models" />
<title>LibreChat</title>
<link rel="shortcut icon" href="#" />
<link rel="icon" type="image/png" sizes="32x32" href="/assets/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="/assets/favicon-16x16.png" />
<link rel="apple-touch-icon" href="/assets/apple-touch-icon-180x180.png" />
<meta name="viewport" content="width=device-width, initial-scale=1, interactive-widget=resizes-content" />
<style>
html,
body {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script>
const theme = localStorage.getItem('color-theme');
const loadingContainerStyle = document.createElement('style');
let backgroundColor;
if (theme === 'dark') {
backgroundColor = '#0d0d0d';
} else if (theme === 'light') {
backgroundColor = '#ffffff';
} else if (theme === 'system') {
const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches;
backgroundColor = prefersDarkScheme ? '#0d0d0d' : '#ffffff';
} else {
backgroundColor = '#ffffff';
}
loadingContainerStyle.innerHTML = `
#loading-container {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
background-color: ${backgroundColor};
}
`;
document.head.appendChild(loadingContainerStyle);
</script>
<script type="module" crossorigin src="/assets/react-interactions.BtNGmjtR.js"></script>
<script type="module" crossorigin src="/assets/markdown_highlight.YFvJ8PVJ.js"></script>
<script type="module" crossorigin src="/assets/validation.PQVr34Q_.js"></script>
<script type="module" crossorigin src="/assets/math-katex.iIKN0cd0.js"></script>
<script type="module" crossorigin src="/assets/vendor.DXtbSsWV.js"></script>
<script type="module" crossorigin src="/assets/i18n.r6zVAoiJ.js"></script>
<script type="module" crossorigin src="/assets/locales.COPKMiK_.js"></script>
<script type="module" crossorigin src="/assets/routing.DIm8L005.js"></script>
<script type="module" crossorigin src="/assets/radix-ui.Tcerz_1_.js"></script>
<script type="module" crossorigin src="/assets/tanstack-vendor.Bc3o6CH5.js"></script>
<script type="module" crossorigin src="/assets/http-client.DkbkpEHu.js"></script>
<script type="module" crossorigin src="/assets/date-utils.j-oxXFG2.js"></script>
<script type="module" crossorigin src="/assets/utilities.DczjhRIE.js"></script>
<script type="module" crossorigin src="/assets/framer-motion.X2YC0yv7.js"></script>
<script type="module" crossorigin src="/assets/advanced-inputs.BwMA5rZ4.js"></script>
<script type="module" crossorigin src="/assets/animations.C5-GP2xT.js"></script>
<script type="module" crossorigin src="/assets/forms.5WOGZjmk.js"></script>
<script type="module" crossorigin src="/assets/security-ui.DGIaIMBl.js"></script>
<script type="module" crossorigin src="/assets/markdown-processing.BAht9_v4.js"></script>
<script type="module" crossorigin src="/assets/avatars.DlTYoDdb.js"></script>
<script type="module" crossorigin src="/assets/headlessui.x_s61Mok.js"></script>
<script type="module" crossorigin src="/assets/virtualization.DKQ29DoO.js"></script>
<script type="module" crossorigin src="/assets/codemirror-state.Pf71Wo5N.js"></script>
<script type="module" crossorigin src="/assets/codemirror-view.CmuSJs-L.js"></script>
<script type="module" crossorigin src="/assets/codemirror-language.5ijRz42u.js"></script>
<script type="module" crossorigin src="/assets/codemirror-core.J0vSLMyp.js"></script>
<script type="module" crossorigin src="/assets/sandpack.D91zKbYv.js"></script>
<script type="module" crossorigin src="/assets/index.CBdTKHHQ.js"></script>
<link rel="stylesheet" crossorigin href="/assets/math-katex.CihyawKy.css">
<link rel="stylesheet" crossorigin href="/assets/index.C5ydvme2.css">
<link rel="manifest" href="/manifest.webmanifest" crossorigin="use-credentials"><script id="vite-plugin-pwa:register-sw" src="/registerSW.js"></script></head>
<body>
<div id="root">
<div id="loading-container"></div>
</div>
</body>
</html>What browsers are you seeing the problem on?
No response
Relevant log output
N/AScreenshots
No response
Code of Conduct
- I agree to follow this project's Code of Conduct