Upload 4 files

.env

@@ -0,0 +1 @@
+GROQ_API_KEY="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"

app.py

@@ -0,0 +1,156 @@
+from fastapi import FastAPI, File, UploadFile
+from fastapi.responses import FileResponse
+from groq import Groq
+import os
+import base64
+from io import BytesIO
+from PIL import Image
+from mdextractor import extract_md_blocks
+from pydantic import BaseModel
+from processpiper.text2diagram import render
+from dotenv import load_dotenv
+
+load_dotenv()
+
+app = FastAPI()
+
+PIPERFLOW_SYNTAX_DOC=""" Generate BPMN diagram using English like PiperFlow syntax
+To create a process map using PirperFlow, you need to define the diagram using a specific syntax. Here is an example:
+
+
+
+
+title: Sample Test Process
+colourtheme: GREENTURTLE
+    lane: End User
+        (start) as start
+        [Enter Keyword] as enter_keyword
+        (end) as end
+    pool: System Search
+        lane: Database System
+            [Login] as login
+            [Search Records] as search_records
+            <Result Found?> as result_found
+            [Display Result] as display_result
+            [Logout] as logout
+        lane: Log System
+            [Log Error] as log_error
+
+    start->login->enter_keyword->search_records->result_found->display_result->logout->end
+    result_found->log_error->display_result
+
+    footer: Generated by ProcessPiper
+
+
+
+Import the render function from processpiper.text2diagram
+Call the render function with the input syntax and the output file name.
+Syntax
+Diagram Configurations
+The PiperFlow syntax for defining a process map is as follows:
+
+title: The title of the diagram.
+footer: The footer text to display on the diagram.
+width : (Optional) Specify the width of the diagram.
+colourtheme: The colour theme to use
+Lane & Pool Configurations
+lane: The name of the lane.
+pool: The name of the pool.
+Element/Shape Configurations
+To add elements to the lane, use one of the following tags. You place your element description within the tag:
+Use ( and ) to create event element
+use (start) to create a start event
+use (end) to create an end event
+use (@timer and ) to create a timer event. Example (@timer Trigger every 1 hour) as timer_event
+use (@intermediate and ) to create an intermediate event. Example (@intermediate Message Received) as intermediate_event
+use (@message and ) to create a message event
+use (@signal and ) to create a signal event
+use (@conditional and ) to create a conditional event
+use (@link and ) to create a link event
+Use [ and ] to create an activity. By default, the activity type is TASK. Example [Place Order] as place_order
+use [@subprocess] to create a subprocess. Example `[@subprocess Get Approval] as get_approval``
+Use < and > to create a gateway. By default, the gateway type is EXCLUSIVE. Example <Result Found?> as result_found
+Use <@parallel and > to create a parallel gateway. Example <@parallel Span Out> as span_out
+Use <@inclusive and > to create an inclusive gateway. Example <@inclusive Condition Met?> as condition_met
+Use <@event and > to create an event gateway
+Connection Configurations
+To connect two elements, use ->. You can chain multiple connections using ->:
+Example:
+login->enter_keyword
+start->login->enter_keyword->search_records->result_found->display_result->logout->end
+To add label to the connection, add ":" when connecting elements. ❗ NOTE: This is a breaking change in v0.6. Versions prior to 0.6 use start-"Enter Credentials->login syntax. See this page for more information.
+Example:
+start->login: Enter credentials
+To specify the connection point manually, add connection side. See How to select sides for more information.
+Example:
+start-(bottom, top)->login
+start-(bottom, top)->login: Enter credentials
+Indentation is not required. However, it is recommended to use indentation to make the diagram easier to read.
+
+currently available color themes are
+Default
+GREYWOOF
+BLUEMOUNTAIN
+ORANGEPEEL
+GREENTURTLE
+SUNFLOWER
+PURPLERAIN
+RUBYRED
+TEALWATERS
+SEAFOAMS
+
+"""
+
+
+
+
+GROQ_API_KEY = os.getenv("GROQ_API_KEY")
+
+class Prompt(BaseModel):
+    prompt: str
+
+def generate_diagram(input_syntax):
+    _, generated_image = render(input_syntax)
+    # Convert the image to a base64 encoded string
+    buffered = BytesIO()
+    generated_image.save(buffered, format="PNG")
+    img_str = base64.b64encode(buffered.getvalue())
+    return img_str.decode("utf-8")
+
+@app.get("/")
+def read_root():
+    return FileResponse("index.html")
+
+@app.post("/generate/")
+async def generate_bpmn(prompt:Prompt):
+    client = Groq(api_key=GROQ_API_KEY)
+
+   
+    completion = client.chat.completions.create(
+    model="llama3-70b-8192",
+    messages=[
+         {
+            "role": "system",
+            "content": "you are business process flow generator using the following piperflow text\n\n" + PIPERFLOW_SYNTAX_DOC
+        },
+        {
+            "role": "user",
+            "content": "generate the piperflow text for the below scenario\n\n" + prompt.prompt
+        }
+    ],
+    temperature=1,
+    max_tokens=1024,
+    top_p=1,
+    stream=False,
+    stop=None,
+    )
+
+    print(completion.choices[0].message.content or "", end="")
+    
+    piperFlowText=extract_md_blocks(completion.choices[0].message.content)[0]
+    print(piperFlowText)
+
+    return {"pipeFlowImage":generate_diagram(piperFlowText),"pipeFlowText":piperFlowText}
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=8000)

index.html

@@ -0,0 +1,173 @@
+
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>BPMN Diagram Generator</title>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css">
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
+  <style>
+    body {
+      background-color: #f8f9fa;
+    }
+
+    .card {
+      background-color: #fff;
+      border-radius: 12px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    .card-header {
+      background-color: #343a40;
+      color: #fff;
+      border-top-left-radius: 12px;
+      border-top-right-radius: 12px;
+    }
+
+    .btn-primary {
+      background-color: #007bff;
+      border-color: #007bff;
+    }
+
+    .btn-primary:hover {
+      background-color: #0056b3;
+      border-color: #004a99;
+    }
+
+    .btn-secondary {
+      background-color: #6c757d;
+      border-color: #6c757d;
+    }
+
+    .btn-secondary:hover {
+      background-color: #5a6268;
+      border-color: #545b62;
+    }
+
+    .loader {
+      border: 4px solid #f3f3f3;
+      border-top: 4px solid #007bff;
+      border-radius: 50%;
+      width: 30px;
+      height: 30px;
+      animation: spin 2s linear infinite;
+    }
+
+    @keyframes spin {
+      0% { transform: rotate(0deg); }
+      100% { transform: rotate(360deg); }
+    }
+  </style>
+</head>
+<body>
+  <div class="container my-5">
+    <h1 class="mb-4 text-center text-dark">
+      <i class="fas fa-project-diagram mr-2"></i>
+      BPMN Generator
+    </h1>
+    <div class="row justify-content-center">
+      <div class="col-md-12">
+        <div class="card mb-4">
+          <div class="card-header">
+            <i class="fas fa-code mr-2"></i>
+            Generate BPMN 
+          </div>
+          <div class="card-body">
+            <div class="form-group">
+              <label for="promptInput" class="form-label">Enter text:</label>
+              <textarea class="form-control" id="promptInput" rows="3"></textarea>
+            </div>
+            <div class="form-group" style="margin-top: 20px;">
+            <div class="d-flex justify-content-between">
+              <button class="btn btn-primary" id="generateButton">
+                <i class="fa fa-cog fa-spin d-none" id="loadingIcon"></i>
+                Generate
+              </button>
+              <button class="btn btn-secondary" id="saveButton" style="display: none;">
+                <i class="fas fa-download mr-2"></i>
+                Save Image
+              </button>
+            </div>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-header">
+            <i class="fas fa-file-alt mr-2"></i>
+            Output
+          </div>
+          <div class="card-body">
+            <div class="form-group" style="display: none;">
+              <label for="pipeFlowText" class="form-label">Pipe Flow Text:</label>
+              <p id="pipeFlowText"></p>
+            </div>
+            <div class="form-group">
+              <label for="pipeFlowImage" class="form-label">Pipe Flow Image:</label>
+              <img id="pipeFlowImage" alt="Pipe Flow Image" class="img-fluid d-none">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const generateButton = document.getElementById('generateButton');
+    const saveButton = document.getElementById('saveButton');
+    const loadingIcon = document.getElementById('loadingIcon');
+    const pipeFlowText = document.getElementById('pipeFlowText');
+    const pipeFlowImage = document.getElementById('pipeFlowImage');
+    
+
+    generateButton.addEventListener('click', async () => {
+      const promptInput = document.getElementById('promptInput').value;
+      if (!promptInput) {
+        alert('Please enter some text.');
+        return;
+      }
+
+      // Show the loading indicator
+      loadingIcon.classList.remove('d-none');
+
+      try {
+        const response = await fetch('http://localhost:8000/generate/', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({ prompt: promptInput })
+        });
+
+        const data = await response.json();
+
+        // Hide the loading indicator
+        loadingIcon.classList.add('d-none');
+
+        pipeFlowText.textContent = data.pipeFlowText;
+
+        if (data.pipeFlowImage) {
+          pipeFlowImage.src = `data:image/png;base64,${data.pipeFlowImage}`;
+          pipeFlowImage.classList.remove('d-none');
+          saveButton.style.display = 'inline-block';
+        } else {
+          pipeFlowImage.classList.add('d-none');
+          saveButton.style.display = 'none';
+        }
+
+        saveButton.addEventListener('click', () => {
+          const link = document.createElement('a');
+          link.download = 'bpmn-diagram.png';
+          link.href = pipeFlowImage.src;
+          link.click();
+        });
+      } catch (error) {
+        // Hide the loading indicator
+        loadingIcon.classList.add('d-none');
+        alert('Error generating the BPMN diagram. Please try again later.');
+        console.error('Error:', error);
+      }
+    });
+  </script>
+</body>
+</html>

requirements.txt

@@ -0,0 +1,8 @@
+fastapi
+python-multipart
+fastapi-cors
+groq
+python-dotenv
+unicorn
+processpiper
+mdextractor