ArtifyMe Portfolio Project

📋 Table of Contents

• Overview 🌐
• Technologies Used ⚙️
• Features 🚀
• Setup ⚙️
• Contact 📫
• Database Schema 📊
• Screenshots 📸
• Acknowledgments 🙌

🌐 Overview

ArtifyMe is a mobile application that allows users to convert sketches into images using AI. The app has a React Native frontend for the mobile interface, a .NET backend with JWT authentication that handles server operations, and a Python FastAPI for generating images from sketches using Stable Diffusion.

⚙️ Technologies Used

• Frontend: React Native

  • Expo: Expo
  • Form Validation: Yup

• Backend: ASP .Net, Python FastAPI

• Authentication: ASP.NET Identity

• Database: Microsoft SQL Server

• Image Storage: S3-AmazonWebServices

• AI Integration: Stable Diffusion v1.5

🚀 Features

• Sketch-to-Image Conversion: Utilize AI Stable Diffusion model via a Python FastAPI to convert sketches into stunning images effortlessly using img2img.
• Interactive Canvas: Enjoy a fully interactive canvas experience with adjustable brush sizes, a diverse range of colors to choose from, and convenient options for clearing and undoing actions.
• Authentication: Robust JWT token-based authentication and authorization mechanisms, seamlessly integrated with ASP .Net backend.
• CRUD Operations: Explore comprehensive CRUD (Create, Read, Update, Delete) functionalities to manage creations efficiently. Save, edit, and delete your sketches with ease, and share your masterpieces effortlessly with friends.
• Profile Management: Experience seamless user account management, including user sign-up, login, and password management, all backed by a .NET backend.
• Cloud Storage Integration and Database: All user creations are stored in Amazon Web Services (AWS) S3 bucket, providing scalable and reliable cloud storage solution for enhanced accessibility. Additionally, leverage MS SQL Server for efficient data management and storage.
• Dark Mode: Enhance your user experience with a sleek and modern dark mode interface.
• Pagination: Navigate through your artwork collection effortlessly with pagination.
• Artwork Details: Dive deeper into your artworks with dedicated artwork details screens, offering full-screen viewing capabilities to appreciate every detail.
• Form Validation: Ensure the integrity and quality of user-generated content with yup form validation.
• Global State Management: Utilizes global state management so that users can browse through previously generated artworks while a new one is being created.

⚙️ Setup

Clone the repository: git clone https://github.com/tomyRomero/artifyme

Please place close attention to the env examples for the frontend as well as the application properties example for the backend (found in src/main/resources/). Ensure you have set the proper variables before starting the application or you will experience errors.

SQL SERVER and AWS S3 SQL Server Setup:

1. Download and Install SQL Server
2. Install SQL Server Management Studio (SSMS) or Azure Data Studio
3. Configure SQL Server: • Open SQL Server Management Studio / Azure Data. • Connect to your local SQL Server instance (usually localhost or .\SQLEXPRESS). • Create a new database if one does not already exist for your application.
4. Configure Connection String and AWS Settings:

• Make sure you have an S3 bucket ready
• Make sure you have your database conncection string ready

5. App.settings.json

• I will be inlcuding a boilerplate app.settings.json file for you to input your connection and S3 keys.

Ensure that you have JAVA and MAVEN installed with the necessary versions, they can be found in the pom.xml, for example the JAVA I used was 20, and MAVEN was 4.0.0, spring-boot was 3.2.3. Ensure that you have these systems up and running if you want to test the server locally, ensure that you have MAVEN and JAVA as environmental variables on your PC.

Backend:

1. Navigate to the project directory: cd backend

2. Install dependencies: dotnet restorel

3. Build the project: dotnet build

4. Apply Entity Framework Migrations: • First, add the migrations:

5. dotnet ef migrations add InitialCreate

6. dotnet ef database update

7. Start the ASP .Net server: dotnet run

AI Integration:

1. Navigate to the project directory: cd fastapi
2. Install dependencies: pip install -r requirements.txt
3. Start the Python server: uvicorn main:app --host 0.0.0.0 --port 8000
4. Install Stable Diffusion library: on the first initial run allow for the stable diffusion model to be downloaded, please note that speed of image generation depends on strength of computer, you can increase the number of inference steps, main.py for better results however will result in longer wait times.

In main.py, line 25, the code is for macOS pipe = pipeline.to("mps") For Windows or Linux systems, you can use "cuda" instead of "mps" if you have a compatible GPU and CUDA installed. "cuda" will utilize the GPU for faster processing.

If you don't have a compatible GPU or CUDA installed, you can use "cpu" to run the model on the CPU.

Frontend:

1. Navigate to the project directory: cd frontend
2. Install dependencies: npm install
3. Start the development server: npm start

Ensure all three softwares are up and running for app to be fully functional. Any questions or errors please contact me.

📫 Contact

For any inquiries or support, please contact me: tomyfletcher99@hotmail.com

📊 Database Schema

📸 Screenshots

Screenshots of the mobile app interface and functionalities.

🙌 Acknowledgments

Shout out to https://loading.io/ and https://icons8.com/ for all the icons provided

Future Updates

In the future, I would love to further optimize the app for Android devices and improve responsiveness across various screen sizes. Additionally, I aim to enhance the AI model by training it more extensively to deliver even better results.