Table of contents
1.Context
This article is my contribution for the MindsDB Hackaton. When I was younger I was introduced to the concept of Lucid Dreaming. It's a set of tools and methods for you to gain consciousness within your dream. One of the most effective techniques is journaling your dream by writing them and doing reality checks.
The Idea
My idea was simple is to leverage AI to analyse text to try to give you an interpretation of the meaning of your dreams based on huge Open-Ai Human language.
The Plan
This part will tackle the technical aspect of the solution.
First, I want it to be used on smartphones as it's the most common item you use right after you wake (if he don't wakes you up).
We will developp a mobile app and we won't use react native.
Don't freak out, stay with me we will be using a new combo that I like very much which is Ionic and Vue3.
Ionic is a framework that allows you to create cross platform in any JS framework that you want which is convenient for me.
For the Backend it's really a BREAD api with AI.
Here comes a new featuring: Supabase x MindsDB.
Supabase will allow me to focus on the Apps Frontent without worrying about all the stuff we have programmed a Thousands of times.
Here is what makes MindsDB powerful is that you can connect directly through Supabase. That's what I like about services like this, very easy to setup very easy to use and very powerful always cool to work with.
And Voilà we have our Tech Stack (VISM), let's get going on programming.
The Code
Here is the main repository for running the app.
The Back End
First thing, I set up a very basic Supabase project.
Supabase is a very convenient solution which allows you to create directly through their dashboard your tables and create apis endpoint for you.
My idea was very basic so we have two tables, a dream table and a user table.
The dream contains the the title, the date and your dream and an explanation column which are link to a user contained inside a user table.
Our back is ready, now let's get MindsDB in the mix !
You simply follow the starting guide to install it locally.
You get a docker fully running working without any additional configuration and it's something that I like about a technology the ability to be simple yet powerful.
Now you have multiple ways to proceed so I scrolled through the documentation and tested multiple techniques. MindsDB Leverage AI through the use of MySQL language which I think a lot of devs are (or should be) familiar with.
I connected my Supabase DB to MindsDb and decided to update the explanation column through the use of Virtual Table.
So I added my engine which is open-ai setted up my prompt and came up with this query.
UPDATE supabase_datasource.dreams
SET explaination = prediction_data.explaination
FROM (
SELECT m.explaination , i.description
FROM supabase_datasource.dreams AS i
JOIN dream_model AS m ) AS prediction_data
WHERE description = prediction_data.description
AND id = ${req.query.id};
Now I just needed to trigger this event when a user asks for it, so I looked at the doc and found a way to interact with mindsDB through API. I was a bit sad because the query endpoint isn't usable with browser since cors is not enabled.
So I setted up a relay api which would execute the query, it's not optimal but I willl probably be looking through submitting a Merge Request and updating this and will be making an article (if I have enough time) .
Now are back is fully ready you can access dreams and get an the explanation let's dive into the Front-End.
The Front-End
I used the Ionic Framework and his Ionic Component this allows me to deploy it to android and IOS and be assured that everything will be working as it generate a Native Application through capacitor.
The Vue Ionic combo is not talked enough so I hope this article makes you want to give it a try.
So I got started using the ionic tabs starter template which displays you a bottom menu which I find is the best for simple App.
Here is the router for the application:
const routes: Array<RouteRecordRaw> = [
{
path: '/',
component: () => import('@/views/WelcomePage.vue'),
name: 'WelcomePage'
},
{
path: '/login',
component: () => import('@/views/LoginPage.vue'),
name: 'LoginPage'
},
{
path: '/register',
component: () => import('@/views/RegisterPage.vue'),
name: 'RegisterPage'
},
{
path:'/add-dream',
component: () => import('@/views/AddDreamPage.vue'),
name: 'AddDreamPage'
},
{
path: '/tabs/',
component: TabsPage,
children: [
{
path: 'tab1',
component: () => import('@/views/Tab1Page.vue')
},
{
path: 'tab2',
component: () => import('@/views/Tab2Page.vue')
},
{
path: 'tab3',
component: () => import('@/views/Tab3Page.vue')
}
]
}
]
const router = createRouter({
history: createWebHistory(import.meta.env.BASE_URL),
routes
})
Here is how I generate my dream:
// this is Vue Code
const addDream = async () => {
const {data, error} = await supabase
.from('dreams')
.insert([
{...newDream.value, userid: user.value.user.id},
])
.select()
if (data) {
dreamId.value = data[0].id;
isLoaded.value = true
await generateExplaination()
}
}
const generateExplaination = async () => {
// this a call to my mindsDB relay
await fetch(`http://localhost:3000/query?id=${dreamId.value}`, {
method: "GET",
headers: {
"Content-Type": "application/json",
},
})
const {data, error} = await supabase
.from('dreams')
.select()
.eq('id', dreamId.value);
dreamExplaination.value = data[0].explaination
}
I add it to my database and call my mindsDBRelay as simple as that.
Here is a Demo video :
Conclusion
This was a very cool project to work on, I will be looking up to improve it with the small amount of time I have left and if so another article will follow this one.
Thanks for reading me and see you next time !