Unclear Distinction Between Images and Videos in https://civitai.com/api/v1/images Response [Bug]:

[AshokWebWorks]

What happened?

When making requests to the https://civitai.com/api/v1/images endpoint, there is currently an issue with the clarity of distinction between images and videos in the API response. The response does not provide sufficient information or metadata to easily determine whether a given resource is an image or a video.

Issue Details:

• There are instances where videos in JPEG format are included in the response.
• The lack of clear indicators or metadata makes it challenging to programmatically differentiate between images and videos.
• This creates difficulties when attempting to display content on the UI, as videos in JPEG format may not load or render properly in image tags.

Request:

I kindly request clarification on how to reliably distinguish between images and videos in the /api/v1/images response. Additionally, if applicable, an improvement in the API documentation to provide clear guidance on handling different types of content would be greatly beneficial.

Steps to reproduce the problem

1. Go & hit this api url https://civitai.com/api/v1/images

  const [data, setData] = useState([]);
  useEffect(()=>{
  (async()=>{
    const response = await axios.get('https://civitai.com/api/v1/images')
    setData(response.data.items);
  })()
},[])

3. Data->

Array(98) 
->0
{
createdAt: "2023-10-24T14:48:30.788Z"
hash: "UGEn;VEk9vMl~DwHawSR4V,+$dGa:~t1ENAc"
height: 1536
id: 3140516
meta: {seed: 1105145580557338, steps: 22, prompt: '(masterpiece, best quality,hires,high resolution:1…razy laugh, colorful, full body, paint explosion)', sampler: 'DPM++ 2M Karras', cfgScale: 8, …}
nsfw: false
nsfwLevel: "None"
postId: 725217
stats: 
{cryCount: 18, laughCount: 118, likeCount: 870, dislikeCount: 0, heartCount: 545, …}
url: "https://image.civitai.com/xG1nkqKTMzGDvpLrqFT7WA/839c721a-3f4f-4b2d-80cc-8d5757159182/width=1280/839c721a-3f4f-4b2d-80cc-8d5757159182.jpeg"
username: "rmmnty"
width: 1280
[[Prototype]]: Object
}

but this is a video and there no data to determine this is a image or video .
so when we display

{data.map((image)=>

 (
  <a  key={image.id} href={image.url}> <img src={image.url} alt={`Image ${image.id}`} height='200px' width='auto'  /></a>
)
)}

is UI some img tag display broken because of response we get is in jpeg type but it's a video type when we directly open that url

What should have happened?

response should contained meta data like

type:image/video

What platforms do you use to access the site?

Windows

What browsers do you use to access the site?

Google Chrome

Additional information, context and logs

No response