Introduction

Hue is an online art store I built for my final portfolio project during my tenure in Code Institute's Full-Stack Software Development program. Hue is a full-stack application that was built in Python, Django, JavaScript, CSS, HTML and Bootstrap. Hue's production build features a PostgreSQL backend.

Even though this is one of my favorite projects, there are still a lot of improvements I'd like to make to it. So, recently, I decided to use MindsDB's GPT-4 integration to add some artificial intelligence to this software.

Thanks to MindsDB's Python SDK, I was able to connect to an OpenAI model I built with MindsDB to this project and add a new feature named Hugo.

Right now, Hugo can do two things: create artwork and generate artwork. Both of these are achieved by sending the user's description of their artwork to MindsDB/OpenAI models as prompts.

This article focuses on the 'title generator' tool, which uses text prompts to generate clever titles based on the user's description of their artwork.

Setup

Creating OpenAI Models with MindsDB

Visit MindsDB's Cloud Editor

Create an ML Engine

CREATE ML_ENGINE open_ai
FROM openai
USING
api_key = 'api_key';

Create the Model

CREATE MODEL open_ai.art
PREDICT title
USING
    engine = 'openai',
    prompt_template = 'Predict three titles for the art work based on text:{{artwork_description}}',
    model_name ='text-davinci-003',
    api_key = 'your_api_key_here';

3, Check the Status:

SELECT *
FROM open_ai.models
WHERE name = 'art';

Test it:

SELECT *
FROM open_ai.art
WHERE artwork_description='blood and guts on a bed of skulls';

| title | artwork_description |
| ----- | ------------------- |
| 1. "The Horror of War"
2. "The Grim Reality of Conflict"
3. "The Price of War" | blood and guts on a bed of skulls |

I didn't say anything about war, but hey.

Connecting the Models

Now it's time to connect the ML engine to Django/Python project. To begin, I had to install the SDK:

pip install mindsdb_sdk

Next, I had to add some sensitive connection arguments to my Django settings.py file (note: these are stored securely in env.py):

# MINDSDB CREDENTIALS DEFINED HERE
MINDSDB_EMAIL = os.environ.get('MINDSDB_EMAIL', '')
MINDSDB_PASSWORD = os.environ.get('MINDSDB_PASSWORD', '')
MINDSDB_HOST = os.environ.get('MINDSDB_HOST', '')
OPENAI_API_KEY = os.environ.get('OPENAI_API_KEY', '')
MINDSDB_SERVER = os.environ.get('MDB_SERVER', '')
MINDSDB_PROJECT = os.environ.get('MINDBS_PROJECT', '')

Now that the connection strings for the configuration have been established, it's time to create the form for users to fill out to generate the titles.

So, in my forms.py file, I added the following:

class ArtworkForm(forms.Form):
    artwork_description = forms.CharField(label='Artwork Description', widget=forms.Textarea)
    predicted_titles = forms.JSONField(label='Predicted Titles', widget=forms.HiddenInput, required=False)

Next, in views.py I imported mindsdb_sdk along with the new form and created the get_title_suggestions view:

import mindsdb_sdk

@login_required
def get_title_suggestions(request):
    form = ArtworkForm()
    predicted_titles = []
    if request.method == 'POST':
        # Retrieve the artwork description from the POST request
        text = request.POST.get('text')
        # Call your MindsDB/ChatGPT model to get the predictions
        mdb_server = mindsdb_sdk.connect('https://cloud.mindsdb.com', settings.MINDSDB_EMAIL, settings.MINDSDB_PASSWORD)
        project = mdb_server.get_project('open_ai')
        query = project.query(f'SELECT * FROM open_ai.art WHERE artwork_description="{text}";')
        predicted_titles = query.fetch().to_dict(orient='records')

    return render(request, 'shop/add_product.html', {'predicted_titles': predicted_titles})

To render the results on the front end, I added the following HTML:

        <div class="col-12">
            <form method='POST' action="{% url 'get_title_suggestions' %}" class="form mb-2" enctype="multipart/form-data">
                {% csrf_token %}
                <input type="text" name="text" id="text">
                <button type="submit" action="{% url 'get_title_suggestions' %}">Generate</button>
            </form>
            {% if predicted_titles %}
            <div class="d-flex">
                <ul>
                    {{ predicted_titles | safe }}
                </ul>
            </div>
            {% endif %}
    </div>

Now, when a seller visits the 'Add Product' form they see an artwork title generator, which is being powered by the MindsDB/OpenAI model we built earlier:

Here's a step-by-step breakdown of this new feature:

A seller visits the 'Add Product' form to add a new art product to the shop.
The seller notices the NEW! collapse button and clicks on it:

The seller types in descriptions of the artwork, using the tool to generate names for his/her artwork:

The seller copies a title that appeals to his or her artwork before heading back to the, 'Add Product' form to add the product:

The seller adds a new product using a title generated by our model:

Conclusion

As can be seen here, MindsDB models can easily be integrated with front-end applications like Hue to add enhanced functionality. This particular example uses the MindsDB Python SDK to connect to the MindsDB server and perform ML queries.

To view the code associated with these changes you can checkout this branch of Hue's repository: https://github.com/alissatroiano/Hue/tree/advanced-features

Next Steps

This is a pretty simple enhancement that uses text prompts from the user to produce titles. In my next article, I will show you how I enhanced this functionality by adding a new database model to store the titles and artworks generated by Hugo and accepted by the user.

This data will be used to train the AI model, which will ultimately cause it to create artwork and titles more specific to a particular user's style.

If you want to learn more about MindsDB, check out these resources:

Deep Dives