-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Added support for different AI APIs and LLMs - Added processing and validation of the LLM generated code
- Loading branch information
Showing
28 changed files
with
418 additions
and
98 deletions.
There are no files selected for viewing
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
70 changes: 47 additions & 23 deletions
70
apps/keadex-battisti/src/pages/[lang]/docs/mina/features/ai.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,64 @@ | ||
| import { Callout } from 'nextra/components' | ||
| import Image from 'next/image' | ||
| import minaLogo from '../../../../../../public/img/keadex-mina-logo-color.svg' | ||
| import openaiLogo from '../../../../../../public/img/openai-logo.svg' | ||
| import { faRobot } from '@fortawesome/free-solid-svg-icons' | ||
| import { faKeadexMina } from '../../../../../../../keadex-mina/src/assets/icons' | ||
|
|
||
| import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' | ||
| import aiScreenshot from '../../../../../../public/img/mina/ai-powered.gif' | ||
|
|
||
| # Diagram Generation w/ AI | ||
|
|
||
| <Callout type="warning" emoji="🔬"> | ||
| The AI integration is currently just an experyment in the early stages and is currently in **alpha version**. It may return incorrect results. | ||
| </Callout> | ||
|
|
||
| <div align="center" className="my-14 block md:flex items-center justify-center"> | ||
| <Image src={minaLogo} alt="Keadex Mina Logo" height={55} /> | ||
| <div className="text-5xl px-5">+</div> | ||
| <Image src={openaiLogo} alt="OpenAI Logo" height={50} className="invert"/> | ||
| </div> | ||
|
|
||
| Mina integrates AI to **generate diagram code** based on a natural language description of your architecture. | ||
|
|
||
| <p align="center"> | ||
| <Image src={aiScreenshot} alt="Screenshot of Keadex Mina generatic diagrams with the AI" width={500} /> | ||
| <Image | ||
| src={aiScreenshot} | ||
| alt="Screenshot of Keadex Mina generatic diagrams with the AI" | ||
| width={500} | ||
| /> | ||
| </p> | ||
|
|
||
| The current implementation is a rudimentary integration with the OpenAI APIs: the Mina backend sends a completion request with your diagram description, to the `gpt-3.5-turbo-instruct` OpenAI model every time you ask Mina to generate a diagram. | ||
| Since Mina strongly supports **open-source** technologies, it offers a **configurable AI integration** that allows you to choose the AI APIs and model you want to use. | ||
|
|
||
| Whatever AI APIs you decide to implement, make sure they are compatible with the **OpenAI format**. Tools like [LiteLLM](https://github.com/BerriAI/litellm) can be used to ensure the OpenAI format. | ||
|
|
||
| This flexibility allows you to leverage AI features **for free** by running an open-source AI model like [Llama](https://llama.meta.com/) locally, using tools such as [Ollama](https://ollama.com/). | ||
|
|
||
| Since Mina is and always will be **open source and free**, and since the `gpt-3.5-turbo-instruct` **OpenAI model is not free**, you will need to configure your **OpenAI API Key** within Mina if you want to use this feature. | ||
| Keadex Mina will then interpret the AI's response and utilize its own [rendering system](/docs/mina/architecture/rendering-system) to render the generated diagram code. | ||
|
|
||
| If you want an idea of the costs you can consider the following data: | ||
| - OpenAI Model: **`gpt-3.5-turbo-instruct`** | ||
| - OpenAI pricing: https://openai.com/api/pricing/ | ||
| - Number of OpenAI requests: **1 OpenAI request/diagram generation request** | ||
| - Max allowed tokens for each request: **2048** | ||
| ## Example of usage with Ollama | ||
|
|
||
| In this example, we'll use [Ollama](https://ollama.com/) to run the [Code Llama LLM](https://ai.meta.com/blog/code-llama-large-language-model-coding/) locally and configure Mina to leverage it for enabling AI features, including generating diagrams from natural language prompts. | ||
|
|
||
| ### Run the LLM locally | ||
|
|
||
| 1. Download Ollama from https://ollama.com/ | ||
| 2. Install and run Ollama | ||
| 3. Open the terminal and run the following command: `ollama run codellama:7b-instruct`. This command will download and locally run the [Code Llama LLM](https://ai.meta.com/blog/code-llama-large-language-model-coding/), which can generate code from text prompts. In this case, we're downloading the smallest version of the model due to the hardware limitations of the local machine. However, you're free to choose a larger version or a different LLM based on your requirements. | ||
|
|
||
| <Callout type="warning" emoji="⚠️"> | ||
| Since we're running the **smallest** version of the LLM **locally**, code | ||
| generation may be slow and might not always produce valid results. For better | ||
| performance and more accurate outputs, consider running a **larger** version | ||
| of the LLM on more powerful hardware. | ||
| </Callout> | ||
|
|
||
| ### Configure Mina to integrate with the locally running LLM | ||
|
|
||
| ## What's Next? | ||
| 4. Open your project in Mina | ||
| 5. Click on the _project_ icon (<FontAwesomeIcon icon={faKeadexMina} className="inline w-4 mx-2" />) in the sidebar | ||
| 6. Click on the _settings_ button | ||
| 7. In the _AI Integration_ section, fill in the following details: | ||
| - **AI API Key**: The API key for accessing the AI APIs. Enter `ollama` since we're using Ollama. | ||
| - **AI API (OpenAI compatible) Base URL**: The base URL of the AI APIs you're using (compatible with OpenAI). Ollama provides [OpenAI-compatible APIs](https://ollama.com/blog/openai-compatibility) at this base URL: http://localhost:11434/v1 | ||
| - **AI Model**: Enter the name of the LLM you're using. Since we selected `codellama:7b-instruct` in step 3, you can use that name here. | ||
| 8. Click on the _save_ button | ||
| 9. Mina can now interact with the LLM to generate diagrams | ||
|
|
||
| There is a strong interest in evolving the integration of Keadex Mina with AI. The long-term goal is to provide a feature that can generate and render detailed, aesthetically pleasing, and linked C4 Model diagrams. | ||
| ### Generate a diagram using AI assistance | ||
|
|
||
| We will soon plan the roadmap to achieve this goal. | ||
| 10. Open a diagram in Mina | ||
| 11. In the code editor, place the cursor where you want the generated code to appear | ||
| 12. In the code editor toolbar, click on the AI icon (<FontAwesomeIcon icon={faRobot} className="inline w-4 mx-2" />). This will open a text area where you can enter your prompt. | ||
| 13. Enter in the text area the description of the architecture for which you want to generate the C4 Model diagram | ||
| 14. Click on the _generate_ button |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| { | ||
| "editor.formatOnSave": true, | ||
| } | ||
| "[rust]": { | ||
| "editor.defaultFormatter": "rust-lang.rust-analyzer" | ||
| } | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
74 changes: 74 additions & 0 deletions
74
apps/keadex-mina/src-tauri/src/model/ai/ai_diagram_gen_response.rs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,74 @@ | ||
| /*! | ||
| Model representing the response of the AI for generating diagrams. | ||
| */ | ||
|
|
||
| use serde::{Deserialize, Serialize}; | ||
| use strum::{Display, EnumIter, EnumString}; | ||
| use ts_rs::TS; | ||
|
|
||
| #[derive(TS)] | ||
| #[ts( | ||
| export, | ||
| export_to = "../../../apps/keadex-mina/src/models/autogenerated/" | ||
| )] | ||
| #[derive( | ||
| Serialize, Deserialize, Display, Debug, EnumString, Clone, EnumIter, Hash, Eq, PartialEq, | ||
| )] | ||
| pub enum AIDiagramGenElementType { | ||
| #[serde(rename = "Person")] | ||
| #[strum(serialize = "Person")] | ||
| Person, | ||
| #[serde(rename = "SoftwareSystem")] | ||
| #[strum(serialize = "SoftwareSystem")] | ||
| SoftwareSystem, | ||
| #[serde(rename = "Container")] | ||
| #[strum(serialize = "Container")] | ||
| Container, | ||
| #[serde(rename = "Component")] | ||
| #[strum(serialize = "Component")] | ||
| Component, | ||
| #[serde(rename = "Relationship")] | ||
| #[strum(serialize = "Relationship")] | ||
| Relationship, | ||
| } | ||
|
|
||
| #[derive(TS)] | ||
| #[ts( | ||
| export, | ||
| export_to = "../../../apps/keadex-mina/src/models/autogenerated/" | ||
| )] | ||
| #[derive(Default, Serialize, Deserialize, Debug, Clone)] | ||
| pub struct AIDiagramGenElement { | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub alias: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub label: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub description: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub technology: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub element_type: Option<AIDiagramGenElementType>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub from_alias: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub to_alias: Option<String>, | ||
| } | ||
|
|
||
| #[derive(TS)] | ||
| #[ts( | ||
| export, | ||
| export_to = "../../../apps/keadex-mina/src/models/autogenerated/" | ||
| )] | ||
| #[derive(Serialize, Deserialize, Debug, Clone)] | ||
| pub struct AIDiagramGenResponse { | ||
| pub diagram_elements: Vec<AIDiagramGenElement>, | ||
| } | ||
|
|
||
| impl Default for AIDiagramGenResponse { | ||
| fn default() -> Self { | ||
| AIDiagramGenResponse { | ||
| diagram_elements: vec![], | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| /*! | ||
| Model representing settings of the AI integration. | ||
| */ | ||
|
|
||
| use serde::{Deserialize, Serialize}; | ||
| use ts_rs::TS; | ||
|
|
||
| #[derive(TS)] | ||
| #[ts( | ||
| export, | ||
| export_to = "../../../apps/keadex-mina/src/models/autogenerated/" | ||
| )] | ||
| #[derive(Default, Serialize, Deserialize, Debug, Clone)] | ||
| pub struct AISettings { | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub api_key: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub api_base_url: Option<String>, | ||
| #[serde(skip_serializing_if = "Option::is_none")] | ||
| pub model: Option<String>, | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| pub mod ai_diagram_gen_response; | ||
| pub mod ai_settings; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,4 @@ | ||
| pub mod ai; | ||
| pub mod c4_element; | ||
| pub mod diagram; | ||
| pub mod diagram_element_search_results; | ||
|
|
||
Oops, something went wrong.