Hue

This full-stack application was developed for Hue, an online art gallery and store where users can use AI to create, share, and sell awesome digital artwork and photography. Hue’s AI art and image models are powered by the MindsDB Dall-E integration, which has been trained on 400 million labeled datasets.

Hue's AI models were all specially trained to generate artwork in the likeness of specific artists and genres.

Hue was built with HTML, CSS, Bootstrap 5, JavaScript, Python 3, and Django. Hue's checkout functionality is powered by the Stripe API. All AI image generation functionality.

Youtube Video

Features

To meet all of Hue's goals and needs, this application will be built with the following features:

Existing Features

• Home - A landing page that allows all users to view information and images related to the application, by having them visit the home page.

  • About: Allows all users to view information and images related to the business, by having them visit the about page.

  • Features: Allows all users to view information and images related to the main features of this applicaton, by having them visit the features section.

• Sign Up - Allows new users to create an account, by having them fill out a form that uses POST to send data.

• Login: Allows exisiting users to login to their account, by having them fill out a form that uses POST to send data.

• Explore: Allows all users to view AI generated artwork & imagery in the database, by having them visit the explore page.

• Add Artwork: Allows registered users to use Hue's specially trained mmodels to create custom artwork, by having them fill out the 'Add Artwork' form.

• Profile: Allows registered users to edit their account details, view order history, and manage their AI creations, by having them visit the profile page.

• Edit Artwork: Allows registered users to edit their AI creations, by having them fill out the 'Edit Artwork' form.

• Delete Artwork: Allows registered users to delete their AI creations, by having them click the 'Delete Artwork' button.

• Sell Artwork: Allows registered users to sell their AI creations, by having them fill out the 'Sell Artwork' form.

• FAQ: Allows all users to view frequently asked questions pertaining to Dall-E's content policy and commercialization policy, by having them visit the FAQ page.

Features Left to Implement

• ChatGPT-4 Integration: this feature will replace the exisiting random prompt generator, currently powered by JavaScript, with a more robust and intelligent prompt generator powered by MindsDB's integration with OpenAI's ChatGPT-4 model.

  • The logic for ths feature will be implemented in the back-end, using Python, Django and the MindsDB Python SDK.

• AI Artwork Marketplace: Will allow registered users to sell their AI creations to other users

  • The existing Stripe logic will be extended for peer-to-peer transactions.

Technologies Used

• Django

• The project uses Django to simplify development and scalability.

• django-allauth

• This project will uses Allauth to simplify user authentication, registration, account management and 3rd party (social media) login.

• sqlite3

• This application is using sqlite3 for internal data storage during local development.

• Pillow

  • This project will use the Python Imaging Library, Pillow to add image processing capabilities to the Python interpreter.

• Virtual Environment Wrapper

  • This project makes use of virtualenvwrapper extensions for creating and deleting virtual environments and managing local development.

• Homebrew

  • This project uses Homebrew to simplify software and package installations in MacOS.

• Bootstrap 5

  • This project uses Bootstrap 5 to simplify the structure of the website and make the website responsive easily.

• Crispy Forms

• Crispy-Bootstrap5

• This project uses crispy filters & tags to control the rendering behavior of Django forms in a consistent, visually appealing and DRY manner.

• MindsDB

  • This project uses MindsDB's Dall-E integration to power Hue's AI art and image models.

• MindsDB Python SDK

  • This project uses MindsDB's Python SDK to power Hue's AI art and image models.

• OpenAI

  • This project uses OpenAI's Dall-E model to power Hue's AI art and image models.

• Dall-E

  • This project uses OpenAI's Dall-E model to power Hue's AI art and image models.

• Stripe

  • This project uses Stripe's API to power Hue's checkout functionality.

• Heroku

  • This project uses Heroku to deploy the application.

• AWS S3

  • This project uses AWS S3 to store static and media files.

• Git

  • This project uses Git for version control, by utilizing the Gitpod terminal to commit to Git and Push to GitHub.

• GitHub

  • This project uses GitHub to store and share all project code remotely.

• Balsamiq

  • This project uses Balsamiq to create the wireframes during the design process.

• Google Fonts

  • This project uses Google fonts to style the website fonts.

• Font Awesome

  • This project uses Font Awesome for the social media icons.

• W3C Markup Validation Service

  • This project uses W3C Markup Validation Service to validate HTML code.

• W3C CSS Validation Service

  • This project uses W3C CSS Validation Service to validate CSS code.

• JSHint

  • This project uses JSHint to validate JavaScript code.

• PEP8

  • This project uses PEP8 to validate Python code.

• Am I Responsive?

  • This project uses Am I Responsive? to test the responsiveness of the website across multiple devices.

• Autoprefixer CSS online

  • This project uses Autoprefixer CSS online to add vendor prefixes to CSS code.

Testing

Research & Planning

Note: the research and planning portion of this README was creeated during the first version of this software. This application has been modified since and this section is being edited accordingly

User Stories

User stories were created by the developer during the planning phase of this project. As practiced in agile development, each user story coincides with a feature of the Hue application and will be accomplished in one sprint.

The following user stories were created for the shopper:

Credits

Content

• The artwork categories in the database and application were copied from Architecure Lab article "15 Types of Digital Art to Consider"

• I copied Font Awesome's CDN from cdnjs.com.

• The grayscale hover effect on the homepage was copied from this Codepen.

• I used this Stack Overflow thread for header, footer and body content templating with Django.

• The images used for this project were copied from:

• Pixabay

• OpenAI

• Dall-E

UX Design

• I copied components from Bootstrap's documentation to make Hue's navigation intuitive and responsive.

• The 'multiple light sources' text-shadow effect used for all social media font-awesome icons (fab) was copied from CSS Tricks.

• The layout and structure for the login (login.html) and signup (signup.html) pages were copied from this Bootstrap 5 Portal theme's login page (https://themes.3rdwavemedia.com/bootstrap-templates/startup/portal-free-bootstrap-admin-dashboard-template-for-developers/).

by copying the contents of this Bootstrap 5 Portal theme's login page (https://themes.3rdwavemedia.com/bootstrap-templates/startup/portal-free-bootstrap-admin-dashboard-template-for-developers/)

Front End Snippets & Resources

• I used this article from CSS Tricks to style the background image on Hue's homepage.

• Hue's images were copied from the following sources:

  • Hero background image: Pexels](https://www.pexels.com/photo/abstract-painting-2156881/)

  • The favicon image was downloaded from The Noun Project and is licensed by Creative Commons

• I learned how to configure a favicon in a Django project by following:

  • W3

  • Automation Panda

  • Tango with Django

  • Stack Overflow

• The code used to create a custom cursor was copied from W3 Schools

• I found the solution to disable right-clicking, dragging and selecting images so I could protect products that are delivered via digital-download and avoid giving them away for free from Medium

Backend Snippets & Resources

• Django timezones were learned by reading Django's documentation.

• I copied syntax and referenced these articles to build the shop, order and order items models.

  • Codegrepper

  • Medium

• The line of code for creating subcategories in Django (specifically the declaration of parent in models.py) was copied from 'Sub categories - How to build an Ecommerce website using Django 3 and Vue.js - Part 23'.

• I followed this video while setting up custom confirmation emails with Django & Google SMTP Automating confirmation emails with Django.

Utilities & tools

• Diffchecker.

• Random Key Gen.

• I learned how to set up Django project's in a virtual environemnt by reading these articles:

  • 'Setting up a Django development environment' from MDN Web Docs

  • 'Installation', Virtualenv docs.

  • Virtualenvwrapper

  • "Install Python3, Virtualenv, Django and Start a new project on your MacOS" from Medium

  • 'Setup python, pip, virtualenv and virtualwrapper, with zsh on a new machine'

  • Python Tips

• Other resources I used during local development

  • 'How to install pip in MacOS', Geeksforgeeks

  • Homebrew

  • Stack Exchange

  • Sublime Text

  • MindsDB for installing the MindsDB Python SDK.

  • Django for installing Django.

  • Django Allauth for installing Django Allauth.

  • Stripe for installing Stripe.

  • ChatGPT for code snippets and installation instructions.

Security

• I copied the following settings(located in settings.py) from Django's Documentation

  • SECURE_SSL_REDIRECT

Acknowledgements

• I followed Code Insitute's video lessons for the first version of this software.

• I learned about writing user stories for multiple end-users by reading the following articles:

• "User Stories with Examples and Template" from Atlassian article "User Stories with Examples and Template"

• "User Stories and User Stories Examples", Knowledge Hut article "User Stories and User Stories Examples

• I referenced this article for any commands related to git reset, git revert or git rebase

• I learned how to make user stories that capture feature requirements from:

• Code Insitute

• Knowledge Hut article "User Stories and User Stories Examples"

• I learned about different target markets by reading:

  • Marketing Artfully article "Customer Demographics - Age Demographics for Advertising"

• I referenced (Django's Documentation)[https://docs.djangoproject.com/en/3.2/] for the following topics:

  • Timezones

  • Models

  • Writing Custom Model Fields

  • Creating Forms from Models

I referenced this article from MindsDB's documentation when building my own specialized Dall-E models: - Tutorial: how to add AI image generation to your own app