search

responsible-ai-collaborative / aiid

The AI Incident Database seeks to identify, define, and catalog artificial intelligence incidents.
https://incidentdatabase.ai
Other
163 stars 34 forks source link

Image Hosting Issue #895

Open smcgregor opened 1 year ago

smcgregor commented 1 year ago

This report is displaying an image associated with a different incident. See:

Screen Shot 2022-08-04 at 8 38 03 AM

When you first click the edit form, it displays the filler image, but then when you touch the form element it updates the preview to match what is displayed in the build,

Screen Shot 2022-08-04 at 8 38 55 AM

However, when you copy and paste the URL and visit it, the actual image associated with the report is properly displayed,

Screen Shot 2022-08-04 at 8 39 08 AM

The expected behavior here is that the last image above should be displayed in all cases.

pdcp1 commented 1 year ago

@smcgregor I found some issues related to images that I fixed on this PR. I couldn't reproduce the issue on this specific report that you mentioned above, so if you found another example that doesn't work properly, please add it here in order to check if it's fixed by this new PR.

pdcp1 commented 1 year ago

@smcgregor This is the summary of my research on this bug. This PR fixes all my findings.

  1. Incident page (ie: /cite/14#r50): All of these images have the https://o.aolcdn.com/images/dims? prefix and when we transform the image URL to a Cloudinary URL we don’t escape the ? character, so all of them are resolved to https://res.cloudinary.com/pai/image/upload/d_fallback.jpg/f_auto/q_auto/c_fill,h_480/v1/reports/o.aolcdn.com/images/dims no matter what is after the ? character. For example https://res.cloudinary.com/pai/image/upload/d_fallback.jpg/f_auto/q_auto/c_fill,h_480/v1/reports/o.aolcdn.com/images/dims?WHATEVER

I tried to escape the ? but Cloudinary auto-upload and fetch features don't work with the ? escaped character. Another option is to use a URL shortener, like tinyurl.com, but I wouldn't say I like this approach because we will rely on tinyurl.com system redirects to retrieve the images 👎 . In this PR, I decided to fix all 9 reports that are actually presenting this image problem using an update migration.

In my opinion, the final solution is to change the image uploader component to use the Cloudinary SDK uploader component https://cloudinary.com/documentation/javascript_image_and_video_upload. If we decide to take this approach, we should do in another issue since is a medium/large effort change that affects multiple site components.

  1. Report edit page (ie: /cite/edit/?report_number=1265): The image uploader component doesn't display the selected as expected. Code fixed and tests added to avoid future issues.
smcgregor commented 1 year ago

The deepfake capstone teams are likely to be working on file upload functionality, so I think we can call this one as complete (with your changes) and pick this up again next year.