elizasohn / artscii Goto Github PK

The navbar should indicate what page is currently being viewed

AC:

• Underline appears under current page title in navbar

We need to figure out how the MP4 delivered by the AI will be converted to ASCII.

display video inside canvas

Ascii Camera

Convert Gif to MP4 in JS

As a user, I would like a basic user account for artscii, so that I can have my data persist

AC:

• Create database to store user information

As a user, I want artscii to have a favicon and read "Artscii" on the browser tab so that I can quickly identify the 'Artscii' tab among other open browser tabs.

Acceptance Criteria:

• Alter title tag html from "React App" to "Artscii"
• Create custom favicon (or find one) for our webpage. Size: 16x16 or 32x32 pixels?
• Link favicon within head section of public html.

As a user I want a player to display all images generated by the app so that I have a consistent experience.

AC:

• Modify the player component so that it can display ASCII on a canvas element and raw PNG data like we will receive from the API
• Canvas element

https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258

Currently, the deployment script runs a build and publishes to the gh-pages branch, but the CNAME is not updated so the subdomain needs to be manually reset in github settings.

AC:
running "npm run deploy" will deploy site with CNAME and maintain current subdomain address

Consolidate imports and exports from main folders like assets and services

Currently, Mozilla Firefox has formatting issues when displaying the converted Ascii image and creates a garbled mess of characters. This behavior does not occur on Google Chrome.

AC: Fix formatting of ASCII-fied image so it displays properly in Mozilla Firefox.

As a user, I want to be able to fetch a gif from an API using inputted text and parameters.

AC:
animated gif will be returned to user upon submitting search
pressing "asciify gif" will return an animated ascii version of the gif

Just seeing what github issues is like

As a user, I would like to not make the developers incur unreasonable charges so the site does not get shut down.

Rate limiting: https://docs.rapidapi.com/docs/rate-limiting

We need to write unit tests for the DisplayManager class
AC: Coverage of all paths for DisplayManager rendering and ValidateDisplayManagerProps() function

Enlarges font size so ascii looks more clearly text based

As a user, I want to see a generated image from the model converted into ascii.

AC:

• Get response from API and convert image into ascii format

As a user, I want an 'About' page (section?) that explains the purpose behind this website, so that I can understand what is happening and the purpose of the web app.

Acceptance Criteria:

• New page (section?) linked to the 'About' navbar-link
• Explains our motivation for the website and how to use the interface
• User able to navigate back to home page if on new page

Research stable diffusion to determine how to get it to generate an animated gif image

Links:
https://gigazine.net/gsc_news/en/20220901-stable-diffusion-animation/
https://www.euronews.com/next/2022/10/04/meta-unveils-ai-tool-that-creates-gif-like-videos-from-text-prompts

Points: 3

As a user, I want to be able to fetch an image from a Dezgo API using inputted text and parameters.

Create separate styles for header and ascii so separate pre element styling applies

As @elizasohn mentioned, we should resize the loading gif. Also could maybe make a custom gif?

AC:

• current loading gif resized to not look so pixelated
• (optional) replace current loading gif with custom loading gif

As a user, I would like to be shown different pages when I click on different page titles so that I can navigate through the site

Points: 3

I think we should either change or delete the second README that was generated by the react script.

Maybe we could change it to Artscii app specific build/run instructions?

What do y'all think?

We have decided on using the Dezgo API

AC:

• Register an account for our team select a reasonable subscription plan.

Repro steps:

1. Search for image
2. Hit 'asciify' button
3. Search for another image
4. Response loads without loading gif

Looks like this bug was introduced with PR #48

Just noticed that the ascii art title for the webpage is off by one space.

As a user I don't want to see the default "react-app" name or favicon.ico displayed in the browser tab because it looks unprofessional.
:P
AC: Change the icon and the HTML title with personalized version

We should have a project wiki that includes a page where we can track the links we share during our group meetings.

Modify styling to display better on smaller screens

• realign header
• reduce margins
• align search text to one line

As a user, after receiving a result from Stable Diffusion, I want to have a UI to start the ASCII conversion process.

AC:
Create the UI for converting a response from Stable Diffusion into ASCII

• Display result from stable diffusion
• Create convert button
• Prepare the image data to pass to the ascii conversion function

Save deforum's latest model from hugging face, save to drive, and attempt to run successfully through google colab's GPU

Create user interface and logic to download final Ascii art output

As a user I want to be able to write a text query and submit it to the application so it can retrieve a relevant gif for me.

Points: 1

Research ways to incorporate moving image onto the static source image from the API response.

Ideas:

• youtube video
• webcam
• animated element?

As a user I want context for input fields and and instructions on what to do on the webpage.

AC:

• Instructions on how to interact with the components

As a user I want to have a clean and clear interface upon launching the app so that it looks more polished.

AC: Remove the "under construction" gif and replace it with a "waiting" state in the display manager with a message that gives the user a call to action

As a user, I want to have a player to display the app's video/image content on so that it can cleanly show the results of the ASCII transformation.

AC: Create a Player component that can display content from URL and supports: Gif, MP4, JPEG, and PNG

Deploy site to a hosted service

As a user, I want a generated gif to be converted into ascii form.

AC:
Install JS library to convert GIF to ASCII art
Pass in a base64 encoded GIF image and outputs ASCII'fied version in Base64

The 'asciify' button and 'search for' field should only display when a response has been received from the API.

As a user, I want to be able to input different parameters so that the web application can apply them to generating images.

Change from the current ascii style to black text on a white background

test asciify function in jest

As a user, I want to see some indication of loading while waiting for the image to be generated from the API response

AC:

• loading indicator appears after submitting a text-to-image search
• loading indicator disappears when response is received