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

[GeekEdmund]

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

• I have read the Write for the Community program guidelines.

[Theodore-Kelechukwu-Onyejiaku]

Hi @GeekEdmund ,

This looks good. Thank you! 💪

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

[GeekEdmund]

@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]

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

[Theodore-Kelechukwu-Onyejiaku]

This is great! Please proceed. Thank you.

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

[GeekEdmund]

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]

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]

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]

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]

@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]

Thank you @GeekEdmund

[Theodore-Kelechukwu-Onyejiaku]

Hi @GeekEdmund ,

I left a comment on your draft. Thank you.

[GeekEdmund]

Hi @Theodore-Kelechukwu-Onyejiaku ,

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

[Theodore-Kelechukwu-Onyejiaku]

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]

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]

Hi @GeekEdmund ,

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

[GeekEdmund]

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