Forem: Michal Kovacik

Can AI Help with Repository Base Code Understanding?

Michal Kovacik — Wed, 19 Jun 2024 16:21:34 +0000

Understanding and maintaining large codebases is a common challenge in software development, leading to significant time and resource expenditure. Addressing this issue is essential for improving developer productivity and reducing technical debt.

What is code? Code is a recipe for solving a concrete problem. With just the code, you can reverse-engineer to understand which problem it solves and how it does so. This reverse engineering allows you to formulate user stories describing the problem. From these user stories, AI can generate new code. Is this just theoretical, or can current technology help create tools to solve this problem?

In DTIT, particularly within AI4Coding, we’re thinking about technological debt and how to address it.

We start from the premise that the current state of AI systems is not able to offer the in-depth contextual understanding necessary for effective coding support at the repository level. Users of AI tools for code generation and completion often encounter reliability issues when dealing with larger codebases.

Our research indicates that RAG (retrieval-augmented generation) can be beneficial but has limits. Even concepts like Agentic with Chain of Thoughts or Tree of Thoughts are insufficient and can be costly. What else can help? Abstract Syntax Trees (ASTs) are useful, but they don’t provide a repository-level understanding of the code.

Current research shows that knowledge graphs excel in modeling complex relationships and dependencies within code across entire repositories. We utilize RAG, Agentic approaches, and ASTs, but knowledge graphs have been a game-changer for our product—Advanced Coding Assistant.

Why do we still have “assistant” in the title? Even though we are trying to use all known best approaches, keeping the developer in the loop is crucial.

So, my answer to my introductory theoretical question is YES, but we are not in the Harry Potter universe, and AI is not a magic wand, and you cannot expect a “one click” solution. However, providing developers with tools that enhance code understanding at the project level enables them to not only work faster but also tackle tasks that were previously unsolvable.

For more information, please read the articles by my colleagues:

https://medium.com/@cyrilsadovsky/advanced-coding-chatbot-knowledge-graphs-and-asts-0c18c90373be

https://medium.com/@ziche94/building-knowledge-graph-over-a-codebase-for-llm-245686917f96

Stay tune for more information. We will definitely share results from our research.

AI Chat Applications with the Metacognition Approach: Tree of Thoughts (ToT)

Michal Kovacik — Fri, 22 Mar 2024 12:02:46 +0000

In the rapidly evolving field of artificial intelligence (AI), the quest for creating chat applications that can understand and respond with almost human-like accuracy and context-awareness has led to significant innovations. One such innovation is the application of metacognitive strategies, particularly the ToT approach, integrated with Retrieval-Augmented Generation (RAG) technology. This combination promises to revolutionize how chatbots process information and interact with users.

Understanding Metacognition in AI

Metacognition, in the context of AI, refers to the ability of systems to understand and analyze their own thought processes. In human cognition, this involves self-reflection and awareness of one's own knowledge and the ability to adjust strategies accordingly. When applied to AI, metacognition enables chat applications to assess their response mechanisms, leading to more accurate and contextually relevant interactions.

[2305.10601] Tree of Thoughts: Deliberate Problem Solving with Large Language Models (arxiv.org)

The Role of RAG in Chat Applications

Retrieval-Augmented Generation (RAG) is a technique that enhances chatbot responses by retrieving relevant information from a dataset to support the generation of answers. This method allows chat applications to pull from a vast pool of data, ensuring that responses are not only relevant but also enriched with the context necessary for meaningful conversations.

Retrieval-Augmented Generation for Large Language Models: A Survey (arxiv.org)

The Tree of Thoughts Approach

The ToT is a conceptual framework that organizes information in a hierarchical structure, mirroring how human thought processes branch out and interconnect. In chat applications, this approach can manage dependent and independent pieces of information, ensuring that all relevant context is considered in the response generation process.

For instance, when translating code from one file, a chatbot might need additional context from related files or documentation. The ToT approach ensures that these connections are made, enriching the chatbot's response with a comprehensive understanding of the query.

Implementing Tree of Thoughts in Chat Applications with RAG

To address the challenge of integrating the ToT with RAG in a chat application, particularly for tasks like translating code, where I have most experience, for example from Perl to C#, it's essential to consider dependencies that are often overlooked by standard prompting methods. Here's an enhanced approach with concrete examples:

Step-by-Step Integration with Concrete Examples

Data Structuring and Dependency Mapping:
- Begin by organizing your dataset and code repositories in a hierarchical structure that reflects the dependencies among various pieces of code, libraries, and documentation.
  - abstract syntax trees (AST) by Tree sitter
  - Dependency Analysis and Change May-Impact Analysis mention in CodePlan (These features help understand the complex interdependencies within the code repository and predict how specific updates might affect other areas of the codebase)
- Example: For a Perl to C# translation task, create a dependency graph that maps out how different Perl scripts interact with each other and with external libraries. This graph will guide the retrieval process.
Retrieval Mechanism with Dependency Awareness:
- Implement a retrieval system capable of understanding and navigating the dependency graph to fetch not just the target script for translation but also any dependent scripts and libraries.
- Example: If a Perl script main.pl uses a module helper.pl, the retrieval system should fetch both main.pl and helper.pl when tasked with translating main.pl.
Enhanced Prompting for Translation:
- Use the retrieved information to construct enhanced prompts for the RAG model. These prompts should include context about the dependencies to inform the translation process.
- Example: When translating main.pl to C#, the prompt to the RAG model should not only include the content of main.pl but also a summary or key functions from helper.pl to ensure the translated C# code maintains functional integrity.
Iterative Refinement with ToT:
- Apply the Tree of Thoughts framework to iteratively refine the translation. After an initial translation attempt, use ToT to explore alternative translations or adjustments based on the dependencies and the overall structure of the code. For better understanding you can read Cyril Sadovsky Blog.
- Example: If the initial translation of main.pl misses a crucial aspect handled in helper.pl, ToT can guide the model to reconsider this dependency and adjust the translation accordingly.


Fig.1 - Tree of thought method visualization. While GPT-4 with chain-of-thought prompting only solved 4% of tasks, ToT method achieved a success rate of 74%. Code repo with all prompts: this https URL.

Most common used strategy: Multi-Agent Approach

The multi-agent approach in chatbot development involves the coordination of multiple AI agents or models to handle different aspects of a conversation or to combine their strengths for complex tasks.

Implementation examples:

Agentic RAG With LlamaIndex — LlamaIndex, Data Framework for LLM Applications

LangGraph: Multi-Agent Workflows (langchain.dev)

Product which you can try - https://github.com/Pythagora-io/pythagora, check also video - Open-Source AI Agent Can Build FULL STACK Apps (FREE “Devin” Alternative) (youtube.com)

Metacognition approach vs Multi agent approach

Complexity and Implementation: The metacognition approach focuses on the internal processes of a single agent, which might be simpler to implement but challenging to perfect, whereas the multi-agent approach involves coordinating multiple components, which can be more complex but offers scalability and specialization.
Flexibility vs. Specialization: Metacognition lends flexibility and adaptability to a single agent, making it better at self-improvement and handling a wide range of interactions with some depth. In contrast, the multi-agent approach leverages specialization, potentially offering depth in specific domains and a broader overall range of expertise.
Integration Potential: These approaches are not mutually exclusive and could be integrated for enhanced performance. For instance, a multi-agent system could include a metacognitive agent responsible for assessing the system's performance and guiding the collaboration among agents.

Why to consider metacognition approach?

The integration of the metacognition approach, particularly the ToT, with RAG technology represents a significant leap forward in the development of AI chat applications. By enabling chatbots to understand and utilize the full context of their interactions, we can create more engaging, accurate, and human-like conversational experiences. As we continue to explore these innovative approaches, the potential for AI to understand and interact with the world in a more nuanced and meaningful way seems increasingly within reach.

** comment: I really like generating picture with AI, so please do not hate me for my header picture.

Simplifying AI Integration with API Standards.

Michal Kovacik — Tue, 27 Feb 2024 14:13:25 +0000

The backbone of effective AI integration lies in the establishment and adherence to API standards. These standards are not merely guidelines but are instrumental in ensuring that different components of an application, such as backend services and front-end interfaces, can communicate effortlessly. The project under discussion serves as an exemplary case of this principle in action.

Example Project Overview

This Flask application acts as a middleman, facilitating communication between an AI model (for example OpenAI ChatGPT) and a user interface built with Streamlit. The key to its swift integration lies in the standardized API endpoints and data exchange formats, which are in line with OpenAI's API standards.

Standardization at Work

The Flask application defines this endpoint:

/v1/chat/completions: Handles requests to generate chat completions based on user prompts.

These endpoints are designed to expect and return data in a structured format, mirroring the standards set by OpenAI. This consistency is crucial for integrating with ChatGPT (or different LLM - includes local deployments) and ensures that adding a new front-end interface like Streamlit is straightforward.

Code Snippets Demonstrating Standards and Integration

Flask Endpoint for Chat Completions:



pythonCopy code
@app.route('/v1/chat/completions', methods=['POST'])
def chat_completions():
    request_data = request.json
    # Standardized request handling
    model = request_data.get('model', 'default-model')
    prompt = request_data.get('prompt', '')
        session_id = request_data.get('session_id')
    security_token = request_data.get('token')
    ...
    response = client.chat.completions.create(model=model, messages=...)
    ...

This code snippet shows how the Flask app handles POST requests to /v1/chat/completions. It adheres to a structured request format, expecting specific fields such as model and prompt. This alignment with OpenAI's API standards ensures that the application can easily parse requests and communicate with external AI services. On the top of it, you can extend call with your properties - session_id and security_token.

Streamlit Interface for User Interaction:



pythonCopy code
import streamlit as st
import requests

st.title('Chat with AI')
...
response = requests.post(
    api_url,
    json={'model': model, 'prompt': prompt, 'session_id': session_id, 'token': security-token}
)
...

Here, the Streamlit script illustrates how the front end consumes the Flask API, sending data in a structured format that matches the expectations of the Flask endpoints. This seamless integration is made possible by the consistent application of API standards across both the Flask application and the Streamlit front end. It's also important to note that you can implement custom properties, as was proposed in the Flask backend app.

Integrate, Integrate, Integrate

The integration demonstrated in this project underscores the value of API standards in bridging the gap between complex AI functionalities, your services and user-friendly interfaces. Thus, you will be able to integrate open-source products, your custom products, or COTS in a very simple and direct way.

This practical example serves as a blueprint for developers looking to utilizing the capabilities of AI in their applications, highlighting that through the lens of standards, the path to integration is not only viable but streamlined.

For a deeper dive into the project and its implementation, exploring the GitHub repository will provide additional insights and the full codebase.


*Fig.1 - The diagram presented highlights the difficulties that development teams may face when choosing to implement custom APIs for AI services. Custom solutions often lead to a complex mixture of integrations, each with unique maintenance and compatibility requirements—elements that can slow down the development process and increase the workload. On the other hand, embracing OpenAI API standards can simplify the integration process, promoting consistency and speeding up the progression of development projects.

*Fig.1 - The diagram presented highlights the difficulties that development teams may face when choosing to implement custom APIs for AI services. Custom solutions often lead to a complex mixture of integrations, each with unique maintenance and compatibility requirements—elements that can slow down the development process and increase the workload. On the other hand, embracing OpenAI API standards can simplify the integration process, promoting consistency and speeding up the progression of development projects.

Why to use Open AI API standards:

OpenAI is the most popular format for describing AI APIs, leading to more community support and a proliferation of tools leveraging OpenAI for generating AI enabled applications
OpenAI API standards provide a clear and concise way to define API endpoints, parameters, and responses, which reduces the risk of errors and bugs during integration, making APIs more developer-friendly and easier to use.
A valid OpenAPI specification can save significant time and resources, allowing for quick and correct SDK generation, reducing support queries, and simplifying the integration process
Investing in a fully compliant OpenAPI specification can reduce costs by eliminating the need for managing separate SDK development teams
OpenAI API standards allow for the creation of AI solutions tailored to specific industries, providing insights that can inform long-term strategy
Official documentation - here

List of libraries and articles for inspiration:

Thanks Cyril Sadovsky to feedback and hints.

** commented: I really like generating picture with AI, so please do not hate me for my header picture.

Theory Machine: A self-evolving Architecture

Michal Kovacik — Mon, 29 Jan 2024 09:17:09 +0000

I want to share what I've been working on during my personal time lately. Along with my colleague Cyril Sadovsky, we've create a proposal titled "THEORY MACHINE - BRIDGING GENERATIVE AI CREATIVITY AND TURING MACHINE FORMALITY: A PROPOSAL". It's an exploration into how Generative AI and Turing Machines might integrate.

This idea started to take shape during a conversation with Cyril about Turing machines. I remembered a story from my father about Alan Turing. He told me that during his university days in the early '80s in a communist country, Turing's work was almost unknown (Declassification of Bletchley Park’s operation in mid 70 and “Iron Curtain” fall in mid 80). This didn't directly inspire our work but nudged me to join Cyril on this quest. It reminded me that all great ideas begin as mere theories, often unrecognized. As Sigrid said to Jon Snow in Game of Thrones, “You know nothing” – a reminder that the end of a journey is unknown, but starting it is what counts.

In our paper, we propose the 'Theory Machine', a conceptual framework that aims to combine the imaginative potential of Generative AI with the structured precision of Turing Machines. Our goal is to see how Foundational Models might be enhanced in a self-optimizing system. This proposal isn't about claiming a breakthrough; it's about exploring a hypothesis where AI-generated Turing Machines could evolve and adapt by processing continuous streams of data, transforming abstract 'noise' into structured, testable forms.


Fig.1 - Our approach is based on the idea of Recursive Language/Turing Machines, which we envision as a superset of traditional Turing Machines and Neural Networks

After introducing our 'Theory Machine' in the paper, it's important to break down what this really means for those who aren't deeply immersed in technical jargon. Simply put, the 'Theory Machine' is like a sophisticated translator that takes the language of AI creativity and meshes it seamlessly with the logical world of Turing Machines, which are the fundamental principles guiding how computers operate.

Imagine a scenario where AI isn't just following commands, but actively learning, adapting, and evolving as it receives new information. It's like to teaching a child not just to memorize facts, but to understand, question, and even challenge them to foster growth. This is what we envision with the 'Theory Machine'.

For businesses, this could mean AI systems that not only perform tasks but also continuously improve their methods for greater efficiency. In healthcare, AI could evolve to better predict patient needs and treatment outcomes. Even in everyday life, this could lead to smarter, more intuitive technology that understands and adapts to your preferences and habits over time.

Our proposal is the first step in exploring these potentials. It's about setting the stage for AI systems that aren't just tools, but partners in problem-solving and innovation.

I would also recommend read a Cyril's blog post.

Exploring new solutions with AI and your data.

Michal Kovacik — Mon, 14 Aug 2023 07:55:44 +0000

As developers, we're always on the hunt for new and exciting tools. Recently, few AI solutions have caught my eye. Let's explore what these solutions offer and how you, as a fellow developer, can make use of them.

Microsoft's Solution: ChatGPT with Azure Cognitive Search

Learn More About Microsoft's Solution

Microsoft introduces Azure Cognitive Search and Azure OpenAI Service. This synergy allows developers to create solutions related to ChatGPT, but powered by your proprietary data. By using Azure's robust enterprise features, Cognitive Search's adeptness at indexing and retrieving data, and ChatGPT's natural language interaction capabilities, businesses can create dynamic conversational experiences rooted in their own knowledge bases.

Amazon's Solution: Generative AI with Kendra and LangChain

Learn More About Amazon's Solution

AWS presents a solution for Generative AI applications using Amazon Kendra, large language models (LLMs), and the LangChain framework. Kendra retrieves relevant enterprise data, which is then processed by LLMs to produce accurate responses, all orchestrated through LangChain.

Google's Solution: Generative AI with Vertex AI PaLM 2 and LangChain

Learn More About Google's Solution

Google Cloud offers approach for Generative AI applications by integrating Vertex AI PaLM 2 models with the LangChain framework. The Vertex AI PaLM models, tailored for text and chat interactions, work in tandem with LangChain, allowing Large Language Models (LLMs) to interact with external systems, such as databases or Google Search. This ensures that the AI not only understands but also reasons with data in a context-rich manner.

All three solutions emphasize the use of proprietary data with RAG technique. While each solution has its unique features and benefits, they all ensure that AI not only understands but also reasons with data in a context-rich manner. This shared focus on RAG underscores its significance in the current AI landscape and its potential to change how we interact with and leverage AI.

Innovation: The Fridge Story

Who makes the most from fridges? Not the sellers, but Coca-Cola - they make products for fridges. This story shows how we developers can use AI tools, like a fridge, to make new things.

Like Coca-Cola used fridges, we can use AI for new ideas. The secret is how you use and change it for new challenges.

LLM Techniques

Fine-Tuning
Fine-tuning is the process of taking a pre-trained model and training it further on a smaller, specific dataset. This tailors the model's responses to particular tasks or domains, enhancing its performance on that specific data.

Good for changing to fit new data.
Makes things better but might cost more.
Use the latest data for your business.

Retrieval Augmented Generation (RAG)
RAG combines the power of large language models with external knowledge retrieval. It first fetches relevant documents or passages from a database and then generates a response based on the retrieved information and the input query.

Another way to learn from new data.
Think over new data without spending much.
Update regularly and check facts.

Prompt engineering
Prompting involves feeding a model a specific input or "prompt" to guide its output. It's a way to interact with pre-trained models, like asking a question and receiving an answer, without additional training.

By knowing these techniques, we can get more from AI, making new apps that keep up with changes in data and tech.

Let's try it
The world of AI has much to offer, and Microsoft's, Google's and Amazon's solutions are ready for you to try. Why not jump in and see what you can make?

Microsoft's Solution GitHub repo
Amazon's Solution GitHub repo
Google's Solution GitHub repo

I'm trying these solutions myself and will share what I find. Stay tuned, and let's see where our creativity takes us.

Creating Webex Bot with GPT - A Simple Guide

Michal Kovacik — Wed, 24 May 2023 20:16:52 +0000

In an age where automation and efficiency are key to productivity, the integration of AI models like GPT with chat platforms has become essential. One such powerful integration is that of GPT (Generative Pre-training Transformer) with Webex, a widely used team collaboration tool. In this blog post, we will explore how you can easily create a Webex bot that harnesses the power of GPT and discuss some of the potential business applications of this combination.

The Power of GPT and Webex
GPT is an advanced language model that uses machine learning to generate human-like text. When integrated with a communication platform like Webex, it enables the creation of a bot capable of answering queries, giving responses, and holding conversations that closely resemble human interaction.

Webex is a platform loved for its convenience and efficiency in handling team collaborations, meetings, and chats. It already includes user authentication which, when coupled with a GPT-powered bot, provides a secure, effective, and personalized user experience.

Why Combine GPT and Webex?
This integration has several advantages. Firstly, the combination provides an AI assistant that is capable of human-like interactions. This can help in automating responses to FAQs, handling customer queries, scheduling meetings, and much more. It essentially makes your Webex bot much smarter and more useful.
Secondly, with Webex's built-in user authentication, the security and privacy of your interactions with the GPT-powered bot are ensured. This is particularly important in a world where data privacy and security are paramount.
Finally, the integration finds relevance in numerous business scenarios. It could serve as a virtual assistant, a customer support agent, a meeting scheduler, or even a tool for interactive language learning. The possibilities are immense and largely unexplored.

Your Guide to Creating a Webex Bot Powered by GPT
If you're interested in leveraging the power of GPT for your Webex bot, look no further. I've shared a project on my GitHub that makes this process incredibly easy. The project hosts a Webex bot on Azure and uses an instance of GPT in Azure OpenAI Studio.
The repository includes detailed instructions on setting up the bot, configuring the GPT instance in Azure, and deploying the entire application as an Azure Web App. This way, you can harness the power of GPT in your Webex bot with minimal hassle.

The combination of GPT and Webex opens up exciting possibilities in the realm of AI chatbots. With the authentication already handled by Webex and the conversational capabilities of GPT, you can create an AI assistant that is both smart and secure. Check out the GitHub project to get started on creating your own GPT-powered Webex bot today!

Remember, the journey of exploration and innovation is ongoing. Who knows what exciting applications you might find for your new GPT-powered bot?

Power of Azure OpenAI Services with Python, Flask, and React

Michal Kovacik — Sun, 16 Apr 2023 17:35:07 +0000

Azure OpenAI Services offers an easy-to-use platform for deploying and managing powerful AI models like GPT-3.5-turbo. In this blog post, we will dive into the process of creating a Python Flask backend and React frontend that interact with Azure OpenAI Services to generate interactive conversations using the GPT-3.5-turbo model. We will also provide code examples to demonstrate how you can seamlessly integrate Azure OpenAI Services into your backend and frontend applications.

Setting Up Azure OpenAI Services:
Before diving into the code, you need to set up Azure OpenAI Services. Follow the instructions in the official documentation to create a resource, deploy a model, and retrieve your resource's endpoint and API key.

Backend Implementation:
With Azure OpenAI Services set up, we can now create a Python Flask backend to interact with it. First, install the necessary libraries:

pip install Flask flask-cors openai tiktoken

Here's a short example of how to create a Flask backend that communicates with Azure OpenAI Services:

import json
import requests
from flask import Flask, request, jsonify
from flask_cors import CORS  # Import the CORS package
import tiktoken
import openai

app = Flask(__name__)
CORS(app)  # Enable CORS for your Flask app and specify allowed origins

openai.api_type = "azure"
openai.api_version = "2023-03-15-preview" 
openai.api_base = "YOUR_AZURE_OPENAI_API_KEY"
openai.api_key = "YOUR_AZURE_OPENAI_RESOURCE_ENDPOINT"

deployment_name = "cs-chat"

max_response_tokens = 250
token_limit= 4000

def num_tokens_from_messages(messages, model="gpt-3.5-turbo-0301"):
    encoding = tiktoken.encoding_for_model(model)
    num_tokens = 0
    for message in messages:
        num_tokens += 4  # every message follows <im_start>{role/name}\n{content}<im_end>\n
        for key, value in message.items():
            num_tokens += len(encoding.encode(value))
            if key == "name":  # if there's a name, the role is omitted
                num_tokens += -1  # role is always required and always 1 token
    num_tokens += 2  # every reply is primed with <im_start>assistant
    return num_tokens

@app.route('/api/chat', methods=['POST'])
def chat():
    user_input = request.json.get('user_input')
    conversation = request.json.get('conversation', [{"role": "system", "content": "You are a helpful assistant."}])

    conversation.append({"role": "user", "content": user_input})

    num_tokens = num_tokens_from_messages(conversation)
    while (num_tokens+max_response_tokens >= token_limit):
        del conversation[1] 
        num_tokens = num_tokens_from_messages(conversation)


    response = openai.ChatCompletion.create(
        engine="model-chat", # The deployment name you chose when you deployed the ChatGPT or GPT-4 model.
        messages = conversation,
        temperature=0.7,
        max_tokens=token_limit,
    )

    conversation.append({"role": "assistant", "content": response['choices'][0]['message']['content']})
    return jsonify(conversation)

if __name__ == '__main__':
    app.run(debug=True)

Replace YOUR_AZURE_OPENAI_API_KEY and YOUR_AZURE_OPENAI_RESOURCE_ENDPOINT with the respective values you obtained from your Azure OpenAI Service resource.

Frontend Implementation:
For the frontend, you can use React to create a simple user interface that interacts with the Flask backend. Here's a code for app.js

import React, { useState } from "react";
import axios from "axios";
import "./App.css";


function App() {
  const [input, setInput] = useState("");
  const [loading, setLoading] = useState(false);
  const [messages, setMessages] = useState([

  ]);

  const handleChange = (e) => {
    setInput(e.target.value);
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);

    try {
      const response = await axios.post("http://localhost:5000/api/chat", {
        user_input: input,
        conversation: messages.length === 0 ? undefined : messages,
      });

      if (response.data && Array.isArray(response.data)) {
        setMessages(response.data);
      } else {
        setMessages([...messages, { role: "assistant", content: "No response received. Please try again." }]);
      }
    } catch (error) {
      console.error(error);
      setMessages([...messages, { role: "assistant", content: "An error occurred. Please try again." }]);
    } finally {
      setInput("");
      setLoading(false);
    }
  };

  return (
    <div className="container">
      <header className="header">
        <h1>Mizo's ChatGPT App - instance on Azure </h1>
      </header>
      <main>
        <form onSubmit={handleSubmit}>
          <div className="form-group">
            <label htmlFor="input">Your question:</label>
            <input
              id="input"
              type="text"
              className="form-control"
              value={input}
              onChange={handleChange}
            />
          </div>
          <button type="submit" className="btn btn-primary" disabled={loading}>
            {loading ? "Loading..." : "Submit"}
          </button>
        </form>
        <MessageList messages={messages} />
      </main>
    </div>
  );
}

function MessageList({ messages }) {
  return (
    <div className="message-list">
      <h2>Message History</h2>
      <ul>
        {messages.map((message, index) => (
          <li key={index}>
            <strong>{message.role === "user" ? "User" : "ChatGPT"}:</strong>{" "}
            {message.content.includes("```

") ? (
              <pre className={message.role === "user" ? "user-code" : "chatgpt-code"}>
                <code>{message.content.replace(/

```/g, "")}</code>
              </pre>
            ) : (
              <pre className={message.role === "user" ? "user-message" : "chatgpt-message"}>
                {message.content}
              </pre>
            )}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Running the Application:
With both the backend and frontend implementations in place, you can now run your application. First, start the Flask backend by running the Python script. Next, start your React frontend with npm start or yarn start. Now, you can open the application in your browser and interact with the ChatGPT model powered by Azure OpenAI Services. For deployment of backend app you can use App service and for frontend you can use Static Web app service - link for documentation here.

In this blog post, we have demonstrated how to create a Python Flask backend and React frontend to interact with Azure OpenAI Services using GPT-3.5-turbo. By leveraging the power of Azure OpenAI Services, you can easily integrate advanced AI models into your applications and provide a seamless experience for your users.

It's worth mentioning that there are many existing implementations of similar approaches available on platforms like GitHub. One such example is the Chatbot UI by McKay Wrigley. While experimenting and trying things out is an excellent way to learn, utilising existing solutions can save you valuable time and help you focus on other aspects of your project. By exploring these resources and building upon them, you can speed up your development process and create more efficient and innovative applications.

Happy coding!

For those who wants to try it here is also app.css code:

body {
  background-color: #f8f9fa;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.header {
  text-align: center;
}

.form-group {
  margin-bottom: 1rem;
}

.form-control {
  display: block;
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.form-control:focus {
  border-color: #80bdff;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

.btn {
  display: inline-block;
  font-weight: 400;
  color: #212529;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  background-color: transparent;
  border: 1px solid transparent;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border-radius: 0.25rem;
  user-select: none;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.btn-primary {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
}

.btn-primary:hover {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
}

.btn-primary:focus {
  color: #fff;
  background-color: #0069d9;
  border-color: #0062cc;
  box-shadow: 0 0 0 0.2rem rgba(38, 143, 255, 0.5);
}

.btn-primary:disabled {
  color: #fff;
  background-color: #007bff;
  border-color: #007bff;
  opacity: 0.65;
  cursor: not-allowed;
}

.message-list {
  margin-top: 2rem;
}

.message-list ul {
  list-style-type: none;
  padding: 0;
}

.message-list li {
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid #ddd;
  border-radius: 0.25rem;
  background-color: #f8f9fa;
}

.user-message,
.chatgpt-message {
  display: inline;
  white-space: pre-wrap;
  font-family: monospace;
  margin: 0;
}

.chatgpt-message {
  color: #007bff;
}

.user-message,
.chatgpt-message,
.user-code,
.chatgpt-code {
  display: inline;
  white-space: pre-wrap;
  margin: 0;
  font-size: 0.75rem;
}

.user-message,
.chatgpt-message {
  font-family: monospace;
}

.chatgpt-code {
  color: #007bff;
}

How ChatGPT Turned Me into an Interactive Console

Michal Kovacik — Tue, 28 Mar 2023 10:05:45 +0000

The journey with a software engineer who becomes an interactive console for ChatGPT, an AI language model. Witness code, collaboration, and AI-powered guidance as they tackle GitLab APIs and Python code. Explore the potential and limitations of AI-human collaboration in this journey. Discover how the right guidance can conquer complex problems!

It was a rainy Sunday, a day when most people would choose to stay indoors, warm and cozy. As the leader of a team of software engineers, and a developer at heart, I decided to combine work and play, embarking on a journey to the digital realm of ChatGPT.

The adventure began with a simple query, echoing through the virtual landscape: "Can you recommend some interesting statistics I can create based on data from the GitLab API?" The AI oracle, ChatGPT, responded swiftly, offering a treasure trove of insights. Among the many options, I chose to focus on one specific statistic: "Projects with the longest open issues or merge requests."

As I dove deeper into the code provided by ChatGPT, I stumbled upon a series of challenges. But the AI guide stood by my side, helping me troubleshoot and refine the code until it was perfect. It was during this process that I encountered a persistent error, and ChatGPT suggested: "We can add more print statements to help identify the issue further." It was at this moment that I realised the tables had turned - the "robot" was using me, a human, as a debugging console.

This unexpected role reversal led me to appreciate the power of AI in a new light. ChatGPT had transformed into an interactive console, guiding me through the debugging process with patience and wisdom. Together, we navigated the intricate world of GitLab APIs and Python code, resolving issues and refining solutions. Our collaboration became a story of discovery, learning, and problem-solving.

However, my journey with ChatGPT also revealed the limitations and risks of AI. As powerful and insightful as the AI language model may be, it is still dependent on the context and information provided by the human user. If I had given ChatGPT the wrong context, our collaboration might not have been as successful.While AI has made significant progress, it is essential to remember that it is not perfect. The human touch is still crucial in guiding the AI towards the right path and making the most of its capabilities.

In the end, not only did ChatGPT help me craft the perfect Python script, but it also taught me invaluable lessons about troubleshooting and refining code. As a final request, I asked ChatGPT to assist me in sorting projects by the descending median time to close merge requests. Once again, ChatGPT delivered.

My adventure with ChatGPT was an extraordinary journey of code, collaboration, and AI-powered guidance. It was a reminder that, with the right guidance, even the most complex problems can be conquered.

And so, dear colleagues, I share with you this story of a rainy Sunday, where the lines between human and AI blurred, and I became an interactive console for an AI language model. May your own encounters with ChatGPT be as inspiring and transformative as mine, and remember that the collaboration between human and AI is the key to unlocking their true potential.