Goal Visualizer

Test this app for free
51
import logging
from gunicorn.app.base import BaseApplication
from app_init import create_initialized_flask_app
from flask import render_template, request, jsonify
from abilities import llm_prompt

# Flask app creation should be done by create_initialized_flask_app to avoid circular dependency problems.
app = create_initialized_flask_app()

# Setup logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

@app.route('/')
def home():
    return render_template('home.html')

@app.route('/generate_visualization', methods=['POST'])
def generate_visualization():
    goal = request.json['goal']
    prompt = f"""Create a detailed Mermaid diagram to visualize the following goal: {goal}.
    Use a flowchart structure with 'graph BT' (Bottom to Top) if the main goal should be displayed at the top, or 'graph TD' (Top to Down) if the main goal should be at the bottom.
    Include various tracks or paths to achieve the goal, with intermediate steps and sub-goals. Limit the number of parallel tracks to a maximum of 5.
    Use different node shapes for main goals, sub-goals, and tasks.
Get full code

Created: | Last Updated:

Goal Visualizer is a web app that helps users input their main goals and visualize them. It uses Flask, Apache Spark, React JS and other relevant technologies.

Introduction to the Goal Visualizer Template

The Goal Visualizer template is designed to help users input their main goals and visualize them using a web application. This template leverages Flask for the backend, Mermaid for generating visualizations, and Tailwind CSS for styling. By following this guide, you will be able to set up and run the Goal Visualizer application.

Getting Started

To get started with the Goal Visualizer template, click Start with this Template.

Test

After starting with the template, press the Test button. This will begin the deployment of the app and launch the Lazy CLI. The Lazy platform will handle all the necessary setup and deployment steps.

Entering Input

Once the app is deployed, you will be prompted to provide user input through the Lazy CLI. Follow these steps:

  1. Enter Your Goal:
  2. Navigate to the deployed app's URL.
  3. You will see a text area labeled "Enter Your Goal".
  4. Input your main goal in the text area.

  5. Generate Visualization:

  6. Click the "Generate Visualization" button.
  7. The app will process your input and generate a visualization of your goal using Mermaid.

Using the App

The Goal Visualizer app provides a simple interface for entering goals and viewing visualizations. Here's how to use it:

  1. Home Page:
  2. The home page includes instructions on how to use the Goal Visualizer.
  3. Follow the instructions to enter your goal and generate a visualization.

  4. Visualization:

  5. After clicking the "Generate Visualization" button, the visualization will appear below the input area.
  6. The visualization will be displayed as a Mermaid diagram, showing the main goal and its sub-goals.

Integrating the App

If you need to integrate the Goal Visualizer app with other tools or services, follow these steps:

  1. API Integration:
  2. The app provides an endpoint /generate_visualization for generating visualizations.
  3. You can send a POST request to this endpoint with the goal as JSON data.

Sample Request

bash curl -X POST http://<your-app-url>/generate_visualization \ -H "Content-Type: application/json" \ -d '{"goal": "Your goal here"}'

Sample Response

json { "mermaid_code": "graph BT\nB[Visualization will appear here] --> A[Enter your goal]" }

  1. Embedding Visualizations:
  2. You can embed the generated Mermaid diagrams in other web pages or applications.
  3. Use the Mermaid code provided in the response to render the diagrams.

Conclusion

The Goal Visualizer template provides a straightforward way to visualize your goals. By following the steps outlined in this guide, you can easily set up, test, and use the app. If you need to integrate the app with other tools, use the provided API endpoint and sample code. Enjoy visualizing your goals with the Goal Visualizer!

Technologies

Streamline Adobe XD Design with Lazy AI: Websites, Apps, Dashboards and More Streamline Adobe XD Design with Lazy AI: Websites, Apps, Dashboards and More
Boost Your Canva Designs with Lazy AI: Automate Templates, Streamline Creativity and More Boost Your Canva Designs with Lazy AI: Automate Templates, Streamline Creativity and More

Similar templates