Zelyanoth commited on
Commit
1231cce
Β·
verified Β·
1 Parent(s): cb1c206

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +150 -156
app.py CHANGED
@@ -416,165 +416,164 @@ def screenshot_quick(history: List[List[str]]) -> List[List[str]]:
416
  """Quick screenshot function"""
417
  return process_message("Take a screenshot of the current page", history)
418
 
419
- def create_interface():
420
- """Create the Gradio interface"""
421
 
422
- with gr.Blocks(
423
- title="MCP Browser Agent - Token Optimized",
424
- theme=gr.themes.Soft()
425
- ) as interface:
426
-
427
- gr.HTML("""
428
- <div class="header">
429
- <h1>🌐 MCP Browser Agent - Token Optimized</h1>
430
- <p>AI-powered web browsing with persistent sessions and optimized token usage</p>
431
- </div>
432
- """)
433
-
434
- with gr.Row():
435
- with gr.Column(scale=1):
436
- gr.Markdown("### πŸ”§ Configuration")
437
- api_key_input = gr.Textbox(
438
- label="Mistral API Key",
439
- placeholder="Enter your Mistral API key...",
440
- type="password",
441
- lines=1
442
- )
443
-
444
- init_button = gr.Button("Initialize Agent", variant="primary")
445
- status_output = gr.Textbox(
446
- label="Status & Available Tools",
447
- interactive=False,
448
- lines=6
449
- )
450
-
451
- gr.Markdown("### πŸ’° Token Optimization")
452
- token_stats_button = gr.Button("Show Token Stats", variant="secondary")
453
- token_stats_output = gr.Textbox(
454
- label="Token Usage Statistics",
455
- interactive=False,
456
- lines=8
457
- )
458
-
459
- gr.Markdown("""
460
- ### πŸ“ Optimized Usage Tips
461
- **Token Savings Features:**
462
- - Only last 3 conversation pairs sent to API
463
- - Session context maintained separately
464
- - Reduced max tokens per response
465
- - Smart context summarization
466
-
467
- **Best Practices:**
468
- - Be specific in your requests
469
- - Use "take screenshot" to check current state
470
- - Ask for "browser status" if you need context
471
- - Long conversations automatically optimized
472
- """)
473
-
474
- with gr.Column(scale=2):
475
- gr.Markdown("### πŸ’¬ Chat with Browser Agent")
476
-
477
- chatbot = gr.Chatbot(
478
- label="Conversation",
479
- height=500,
480
- show_copy_button=True
 
 
 
 
 
 
 
 
481
  )
482
-
483
- with gr.Row():
484
- message_input = gr.Textbox(
485
- label="Message",
486
- placeholder="Enter your browsing request...",
487
- lines=2,
488
- scale=4
489
- )
490
- send_button = gr.Button("Send", variant="primary", scale=1)
491
-
492
- with gr.Row():
493
- clear_button = gr.Button("Clear Chat", variant="secondary")
494
- screenshot_button = gr.Button("Quick Screenshot", variant="secondary")
495
-
496
- # Event handlers
497
- init_button.click(
498
- fn=initialize_agent,
499
- inputs=[api_key_input],
500
- outputs=[status_output]
501
- )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
502
 
503
- send_button.click(
504
- fn=process_message,
505
- inputs=[message_input, chatbot],
506
- outputs=[chatbot]
507
- ).then(
508
- fn=lambda: "",
509
- outputs=[message_input]
510
- )
511
 
512
- message_input.submit(
513
- fn=process_message,
514
- inputs=[message_input, chatbot],
515
- outputs=[chatbot]
516
- ).then(
517
- fn=lambda: "",
518
- outputs=[message_input]
519
- )
520
 
521
- clear_button.click(
522
- fn=lambda: [],
523
- outputs=[chatbot]
524
- )
 
525
 
526
- screenshot_button.click(
527
- fn=screenshot_quick,
528
- inputs=[chatbot],
529
- outputs=[chatbot]
530
- )
 
531
 
532
- token_stats_button.click(
533
- fn=get_token_stats,
534
- inputs=[chatbot],
535
- outputs=[token_stats_output]
536
- )
 
537
 
538
- # Add helpful information
539
- with gr.Accordion("ℹ️ Token Optimization Guide", open=False):
540
- gr.Markdown("""
541
- ## πŸ’° How Token Optimization Works
542
-
543
- **The Problem with Original Code:**
544
- - Every API call sent complete conversation history
545
- - Token usage grew exponentially with conversation length
546
- - Costs could explode for long sessions
547
-
548
- **Our Optimization Solutions:**
549
-
550
- 1. **Limited History Window**: Only last 3 conversation pairs sent to API
551
- 2. **Session Context**: Browser state maintained separately from chat history
552
- 3. **Smart Summarization**: Key session info added to each request
553
- 4. **Reduced Limits**: Lower max_tokens and max_iterations
554
- 5. **Token Tracking**: Real-time savings statistics
555
-
556
- **Token Savings Example:**
557
- ```
558
- Original: 10 messages = 5,000 tokens per API call
559
- Optimized: 10 messages = 500 tokens per API call
560
- Savings: 90% reduction in token usage!
561
- ```
562
-
563
- **What This Means:**
564
- - βœ… Persistent browser sessions still work
565
- - βœ… 90%+ reduction in API costs
566
- - βœ… Faster response times
567
- - βœ… Better performance for long conversations
568
- - ⚠️ Agent has limited memory of old messages
569
-
570
- **If Agent Needs Earlier Context:**
571
- - Use "browser status" to check current state
572
- - Take screenshots to show current page
573
- - Re-explain context if needed
574
- - Clear chat periodically for fresh start
575
- """)
576
 
577
- return interface
578
 
579
  def cleanup_agent():
580
  """Cleanup agent resources"""
@@ -599,16 +598,11 @@ if __name__ == "__main__":
599
  try:
600
  logger.info("πŸš€ Starting MCP Browser Agent Application with Token Optimization...")
601
 
602
- # Create and launch interface
603
- interface = create_interface()
604
-
605
- # Launch interface (this will block)
606
  interface.launch(
607
  server_name="0.0.0.0",
608
  server_port=7860,
609
  share=False,
610
- show_error=True,
611
- quiet=False
612
  )
613
  except Exception as e:
614
  logger.error(f"Application error: {e}")
 
416
  """Quick screenshot function"""
417
  return process_message("Take a screenshot of the current page", history)
418
 
419
+
 
420
 
421
+ with gr.Blocks(
422
+ title="MCP Browser Agent - Token Optimized",
423
+ theme=gr.themes.Soft()
424
+ ) as interface:
425
+
426
+ gr.HTML("""
427
+ <div class="header">
428
+ <h1>🌐 MCP Browser Agent - Token Optimized</h1>
429
+ <p>AI-powered web browsing with persistent sessions and optimized token usage</p>
430
+ </div>
431
+ """)
432
+
433
+ with gr.Row():
434
+ with gr.Column(scale=1):
435
+ gr.Markdown("### πŸ”§ Configuration")
436
+ api_key_input = gr.Textbox(
437
+ label="Mistral API Key",
438
+ placeholder="Enter your Mistral API key...",
439
+ type="password",
440
+ lines=1
441
+ )
442
+
443
+ init_button = gr.Button("Initialize Agent", variant="primary")
444
+ status_output = gr.Textbox(
445
+ label="Status & Available Tools",
446
+ interactive=False,
447
+ lines=6
448
+ )
449
+
450
+ gr.Markdown("### πŸ’° Token Optimization")
451
+ token_stats_button = gr.Button("Show Token Stats", variant="secondary")
452
+ token_stats_output = gr.Textbox(
453
+ label="Token Usage Statistics",
454
+ interactive=False,
455
+ lines=8
456
+ )
457
+
458
+ gr.Markdown("""
459
+ ### πŸ“ Optimized Usage Tips
460
+ **Token Savings Features:**
461
+ - Only last 3 conversation pairs sent to API
462
+ - Session context maintained separately
463
+ - Reduced max tokens per response
464
+ - Smart context summarization
465
+
466
+ **Best Practices:**
467
+ - Be specific in your requests
468
+ - Use "take screenshot" to check current state
469
+ - Ask for "browser status" if you need context
470
+ - Long conversations automatically optimized
471
+ """)
472
+
473
+ with gr.Column(scale=2):
474
+ gr.Markdown("### πŸ’¬ Chat with Browser Agent")
475
+
476
+ chatbot = gr.Chatbot(
477
+ label="Conversation",
478
+ height=500,
479
+ show_copy_button=True
480
+ )
481
+
482
+ with gr.Row():
483
+ message_input = gr.Textbox(
484
+ label="Message",
485
+ placeholder="Enter your browsing request...",
486
+ lines=2,
487
+ scale=4
488
  )
489
+ send_button = gr.Button("Send", variant="primary", scale=1)
490
+
491
+ with gr.Row():
492
+ clear_button = gr.Button("Clear Chat", variant="secondary")
493
+ screenshot_button = gr.Button("Quick Screenshot", variant="secondary")
494
+
495
+ # Event handlers
496
+ init_button.click(
497
+ fn=initialize_agent,
498
+ inputs=[api_key_input],
499
+ outputs=[status_output]
500
+ )
501
+
502
+ send_button.click(
503
+ fn=process_message,
504
+ inputs=[message_input, chatbot],
505
+ outputs=[chatbot]
506
+ ).then(
507
+ fn=lambda: "",
508
+ outputs=[message_input]
509
+ )
510
+
511
+ message_input.submit(
512
+ fn=process_message,
513
+ inputs=[message_input, chatbot],
514
+ outputs=[chatbot]
515
+ ).then(
516
+ fn=lambda: "",
517
+ outputs=[message_input]
518
+ )
519
+
520
+ clear_button.click(
521
+ fn=lambda: [],
522
+ outputs=[chatbot]
523
+ )
524
+
525
+ screenshot_button.click(
526
+ fn=screenshot_quick,
527
+ inputs=[chatbot],
528
+ outputs=[chatbot]
529
+ )
530
+
531
+ token_stats_button.click(
532
+ fn=get_token_stats,
533
+ inputs=[chatbot],
534
+ outputs=[token_stats_output]
535
+ )
536
+
537
+ # Add helpful information
538
+ with gr.Accordion("ℹ️ Token Optimization Guide", open=False):
539
+ gr.Markdown("""
540
+ ## πŸ’° How Token Optimization Works
541
 
542
+ **The Problem with Original Code:**
543
+ - Every API call sent complete conversation history
544
+ - Token usage grew exponentially with conversation length
545
+ - Costs could explode for long sessions
 
 
 
 
546
 
547
+ **Our Optimization Solutions:**
 
 
 
 
 
 
 
548
 
549
+ 1. **Limited History Window**: Only last 3 conversation pairs sent to API
550
+ 2. **Session Context**: Browser state maintained separately from chat history
551
+ 3. **Smart Summarization**: Key session info added to each request
552
+ 4. **Reduced Limits**: Lower max_tokens and max_iterations
553
+ 5. **Token Tracking**: Real-time savings statistics
554
 
555
+ **Token Savings Example:**
556
+ ```
557
+ Original: 10 messages = 5,000 tokens per API call
558
+ Optimized: 10 messages = 500 tokens per API call
559
+ Savings: 90% reduction in token usage!
560
+ ```
561
 
562
+ **What This Means:**
563
+ - βœ… Persistent browser sessions still work
564
+ - βœ… 90%+ reduction in API costs
565
+ - βœ… Faster response times
566
+ - βœ… Better performance for long conversations
567
+ - ⚠️ Agent has limited memory of old messages
568
 
569
+ **If Agent Needs Earlier Context:**
570
+ - Use "browser status" to check current state
571
+ - Take screenshots to show current page
572
+ - Re-explain context if needed
573
+ - Clear chat periodically for fresh start
574
+ """)
575
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
576
 
 
577
 
578
  def cleanup_agent():
579
  """Cleanup agent resources"""
 
598
  try:
599
  logger.info("πŸš€ Starting MCP Browser Agent Application with Token Optimization...")
600
 
 
 
 
 
601
  interface.launch(
602
  server_name="0.0.0.0",
603
  server_port=7860,
604
  share=False,
605
+ show_error=True
 
606
  )
607
  except Exception as e:
608
  logger.error(f"Application error: {e}")