Praison AI

Gradio Agent

Learn how to create web interfaces for your AI agents using Gradio

Diagram

User Input

Gradio UI

AI Agent

Results Display

Quick Start

  1. Install Dependencies

    First, install the required packages:

    bash
    pip install praisonaiagents gradio
  2. Create Script

    Create a new file app.py:

    python
            import gradio as gr
        from praisonaiagents import Agent, Tools
        from praisonaiagents import duckduckgo

        def research(query):
            agent = Agent(instructions="You are a Research Agent", tools=[duckduckgo])
            result = agent.start(query)
            # Format the result with enhanced markdown
            formatted_result = f"""
{result}
----
*Generated by PraisonAI Research Assistant*
            """
            return formatted_result

        # Create a simple Gradio interface
        demo = gr.Interface(
            fn=research,
            inputs=gr.Textbox(
                label="Research Query",
                placeholder="Enter your research topic...",
                lines=2
            ),
            outputs=gr.Markdown(
                show_copy_button=True,
                height=500,
                container=True
            ),
            title="AI Research Assistant",
            description="Enter your research query below to get started!",
        )

        if __name__ == "__main__":
            demo.launch()
  3. Run Application

    Run your Gradio app:

    bash
    python app.py

Features

Simple Interface

Create beautiful UIs with minimal code.

 Markdown Support

Rich text output with built-in markdown rendering.

 Copy Button

One-click copying of results.

 Responsive Design

Mobile-friendly interface out of the box.

Understanding the Code

The example demonstrates a simple research assistant with these key components:

  1. Function Definition:
  2. research() function that processes user input
  3. Agent initialization and execution
  4. Result formatting with markdown
  1. Interface Setup:
  2. Input textbox configuration
  3. Markdown output with copy button
  4. Title and description settings
  1. Launch Configuration:
  2. Main entry point check
  3. Server launch with default settings

Customization

You can enhance the UI with additional Gradio components:

python
# Add multiple input types
demo = gr.Interface(
    fn=process_inputs,
    inputs=[
        gr.Textbox(label="Query"),
        gr.File(label="Upload Document"),
        gr.Dropdown(choices=["Option 1", "Option 2"])
    ],
    outputs=[
        gr.Markdown(label="Results"),
        gr.Plot(label="Visualization")
    ]
)

# Add themes and styling
demo = gr.Interface(
    ...
    theme="default",
    css=".gradio-container {background-color: #f0f0f0}"
)

# Add authentication
demo.launch(auth=("username", "password"))

Next Steps