Gradio for AI Engineering: Multi-Modal UI, Hugging Face & API Integration

import gradio as gr
import time

def process_multimodal_input(input_image, user_prompt):
  """
  Simulates multi-modal vision-language model processing.
  """
  if input_image is None:
      return "Please upload an image to analyze."
  
  # Process image array dimensions
  h, w, c = input_image.shape
  response = f"Analyzed Image ({w}x{h} px). Query: '{user_prompt}'. Output: Vision model verified clear account document scan."
  return response

# Construct Gradio UI layout using gr.Blocks
with gr.Blocks(title="Esaholic Multi-Modal Vision Sandbox", theme=gr.themes.Soft()) as demo:
  gr.Markdown("# Esaholic Multi-Modal AI Inspection Sandbox")
  gr.Markdown("Upload document scans or invoice images for real-time vision model analysis.")
  
  with gr.Row():
      with gr.Column(scale=1):
          image_input = gr.Image(label="Upload Document Image", type="numpy")
          text_prompt = gr.Textbox(label="Prompt / Inspection Query", value="Identify vendor name and total balance.")
          submit_btn = gr.Button("Analyze Document", variant="primary")
      
      with gr.Column(scale=1):
          text_output = gr.Textbox(label="Model Output Response", lines=6)
  
  # Bind button click event to processing function
  submit_btn.click(
      fn=process_multimodal_input,
      inputs=[image_input, text_prompt],
      outputs=text_output
  )

if __name__ == "__main__":
  demo.launch(server_name="0.0.0.0", server_port=7860)