Building an Image-to-Story App with Vue.js, Hugging Face, and Strapi

GeekEdmund commented 4 months ago

What is your article idea?

The idea is to write an article that will cover the process of building an image-to-story application using Vue.js for the frontend, Hugging Face for image processing and text generation, and Strapi for backend management. You'll learn how to set up the project, connect the frontend to Strapi, and ultimately create an application that utilizes AI, powered by Hugging Face models, to analyze images and generate engaging content based on their content. Whether it's creating narrative stories, scripts inspired by images, or generating recipes from food images, the AI serves as a creative partner, transforming visual assets into captivating textual outputs then to audio.

What are the objectives of your article?

I. Introduction

Capture the reader's interest: Briefly explain image-to-story generation and its potential applications.
Introduce the project: Highlight the app's functionalities and the technologies used (Vue.js, Hugging Face, Strapi).
Target audience: Who will benefit from this guide (developers, creatives, AI enthusiasts).

II. Prerequisites

List the necessary tools and technologies:
Node.js and npm (or yarn)
Basic understanding of Vue.js
Familiarity with Hugging Face concepts

III. Project Setup

Create a new Vue.js project.
Install required dependencies:
Vue-router (for potential routing needs)
Axios (or similar library for API calls)
Specific Hugging Face transformers library (based on chosen model)

IV. Vue.js Component Structure

App.vue: Main application component, manages overall structure and state.
StoryDisplay.vue: Displays the generated story text.
services/imageToStory.js: Communicates with Strapi backend (if used) and processes image data (optional preprocessing).

V. Image Processing and Story Generation

Explore pre-trained image-to-text models available in Hugging Face.
Integrate a chosen model: Load the model, prepare image data for input.
Generate story text using the model's inference capabilities.
Generate an audio from the text to bring about more story telling experience.

VI. Strapi Backend Integration (Optional)

Set up a Strapi project for potential data storage.
Define an API endpoint to send image data to the Vue.js frontend.

VII. User Interface and Interactivity

Design the Vue.js UI for story display, and user interaction.
Implement functionality to handle user actions:
Displaying the generated story
Play the audio of the generated story

IX. Conclusion

Recap the key takeaways and the power of combining these technologies.
Provide link to code repository.

What is your expertise as a developer or writer?

Advance

What type of post is this?

Tutorial

Terms & Conditions

[X] I have read the Write for the Community program guidelines.

Theodore-Kelechukwu-Onyejiaku commented 4 months ago

Hi @GeekEdmund ,

This looks good. Thank you! 💪

For clarity, can you explain what our AI does in the end of this tutorial?

GeekEdmund commented 4 months ago

@Theodore-Kelechukwu-Onyejiaku , The main agenda of the app is to utilize AI, powered by Hugging Face models, to analyze images and generate engaging content based on their content. Whether it's creating narrative stories, scripts inspired by images, or generating recipes from food images, the AI serves as a creative partner, transforming visual inputs into captivating textual outputs then to audio.

GeekEdmund commented 4 months ago

Hi @Theodore-Kelechukwu-Onyejiaku , I have refined the main idea, bringing about clarity on the end goal.

Theodore-Kelechukwu-Onyejiaku commented 4 months ago

This is great! Please proceed. Thank you.

Depending on the quality of your content, we might later have this as an intermediate tutorial.

GeekEdmund commented 4 months ago

This is great! Please proceed. Thank you.

Depending on the quality of your content, we might later have this as an intermediate tutorial.

okay

GeekEdmund commented 2 months ago

Hello @Theodore-Kelechukwu-Onyejiaku ,

I am done working on the draft of this article. Please take a look at it here. I have provided the cover art. Also, here is the GitHub repository.

Theodore-Kelechukwu-Onyejiaku commented 2 months ago

Hi @GeekEdmund ,

Thank you for your contribution! I just skimmed through your work. The GIF you provided doesn't show the audience the image added in order to generate its own story.

Please let me know if I am missing anything. Thank you.

GeekEdmund commented 2 months ago

Hi @Theodore-Kelechukwu-Onyejiaku ,

The image is handled and managed by strapi where it is added during collection type creation. It's then fetched directly from strapi backend for processing by application.

GeekEdmund commented 2 months ago

@Theodore-Kelechukwu-Onyejiaku , I had provided the explanation as required. Care to have a look at it and move it to the next step, In Review I propose.

Theodore-Kelechukwu-Onyejiaku commented 2 months ago

Thank you @GeekEdmund

Theodore-Kelechukwu-Onyejiaku commented 1 month ago

Hi @GeekEdmund ,

I left a comment on your draft. Thank you.

GeekEdmund commented 1 month ago

Hi @Theodore-Kelechukwu-Onyejiaku ,

I have addressed the issue in the draft. Care to have a look at it.

Theodore-Kelechukwu-Onyejiaku commented 1 month ago

Your app is interesting. But, wouldn't it be great it allows users input an image and generate the story based it?

At the moment, it generates the story based on image already uploaded in Strapi backend.

Could you please address this? Thank you.

GeekEdmund commented 1 month ago

hello @Theodore-Kelechukwu-Onyejiaku,

When I adjust the application to directly accept image uploads, then I won't make use of strapi which acts as a central storage.

Theodore-Kelechukwu-Onyejiaku commented 1 week ago

Hi @GeekEdmund ,

Meanwhile, you could store the image and the story in Strapi after generating the story for records or historical data.

GeekEdmund commented 1 week ago

@Theodore-Kelechukwu-Onyejiaku Lemme work on that. Thanks.

strapi / community-content