Abhaykoul commited on
Commit
1a0446e
·
verified ·
1 Parent(s): c5fbd5a

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +77 -502
app.py CHANGED
@@ -204,291 +204,11 @@ def chat_interface(message, history, max_tokens, temperature, top_p):
204
  print("Initializing model...")
205
  load_model()
206
 
207
- # Advanced CSS for professional UI design
208
  custom_css = """
209
- /* Import Google Fonts */
210
- @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
211
-
212
- /* Global styling */
213
- * {
214
- font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
215
- }
216
-
217
- /* Main container */
218
- .gradio-container {
219
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
220
- min-height: 100vh;
221
- }
222
-
223
- /* Header styling */
224
- .header-container {
225
- background: rgba(255, 255, 255, 0.95);
226
- backdrop-filter: blur(20px);
227
- border-radius: 20px;
228
- padding: 24px;
229
- margin-bottom: 24px;
230
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
231
- border: 1px solid rgba(255, 255, 255, 0.2);
232
- }
233
-
234
- /* Main chat container */
235
- .chat-container {
236
- background: rgba(255, 255, 255, 0.95);
237
- backdrop-filter: blur(20px);
238
- border-radius: 20px;
239
- padding: 24px;
240
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
241
- border: 1px solid rgba(255, 255, 255, 0.2);
242
- }
243
-
244
- /* Chatbot styling */
245
  .chatbot {
246
- font-size: 15px;
247
- font-family: 'Inter', sans-serif;
248
- background: transparent;
249
- border: none;
250
- border-radius: 16px;
251
- overflow: hidden;
252
- }
253
-
254
- .chatbot .message {
255
- margin: 12px 0;
256
- padding: 0;
257
- background: transparent;
258
- }
259
-
260
- .chatbot .message.user {
261
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
262
- color: white;
263
- border-radius: 18px 18px 4px 18px;
264
- padding: 16px 20px;
265
- margin-left: 20%;
266
- box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3);
267
- }
268
-
269
- .chatbot .message.bot {
270
- background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
271
- color: #2c3e50;
272
- border-radius: 18px 18px 18px 4px;
273
- padding: 16px 20px;
274
- margin-right: 20%;
275
- box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
276
- border: 1px solid rgba(0, 0, 0, 0.05);
277
- }
278
-
279
- /* Input styling */
280
- .input-container {
281
- background: rgba(255, 255, 255, 0.9);
282
- border-radius: 25px;
283
- padding: 8px;
284
- box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
285
- border: 2px solid transparent;
286
- transition: all 0.3s ease;
287
- }
288
-
289
- .input-container:focus-within {
290
- border-color: #667eea;
291
- box-shadow: 0 4px 20px rgba(102, 126, 234, 0.2);
292
- }
293
-
294
- .gradio-textbox {
295
- border: none !important;
296
- background: transparent !important;
297
- font-size: 15px;
298
- padding: 12px 20px;
299
- border-radius: 20px;
300
- font-family: 'Inter', sans-serif;
301
- }
302
-
303
- .gradio-textbox:focus {
304
- outline: none !important;
305
- box-shadow: none !important;
306
- }
307
-
308
- /* Button styling */
309
- .gradio-button {
310
- border-radius: 20px !important;
311
- font-weight: 600 !important;
312
- font-family: 'Inter', sans-serif !important;
313
- transition: all 0.3s ease !important;
314
- border: none !important;
315
- font-size: 14px !important;
316
- padding: 12px 24px !important;
317
- }
318
-
319
- .gradio-button.primary {
320
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
321
- color: white !important;
322
- box-shadow: 0 4px 16px rgba(102, 126, 234, 0.3) !important;
323
- }
324
-
325
- .gradio-button.primary:hover {
326
- transform: translateY(-2px) !important;
327
- box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4) !important;
328
- }
329
-
330
- .gradio-button.secondary {
331
- background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%) !important;
332
- color: #495057 !important;
333
- box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
334
- }
335
-
336
- .gradio-button.secondary:hover {
337
- transform: translateY(-1px) !important;
338
- box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
339
- }
340
-
341
- /* Parameter panel styling */
342
- .parameter-panel {
343
- background: rgba(255, 255, 255, 0.9);
344
- backdrop-filter: blur(20px);
345
- border-radius: 20px;
346
- padding: 24px;
347
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
348
- border: 1px solid rgba(255, 255, 255, 0.2);
349
- }
350
-
351
- /* Slider styling */
352
- .gradio-slider {
353
- margin: 16px 0 !important;
354
- }
355
-
356
- .gradio-slider .wrap {
357
- background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
358
- border-radius: 12px;
359
- padding: 16px;
360
- border: 1px solid rgba(0, 0, 0, 0.05);
361
- }
362
-
363
- /* Examples styling */
364
- .gradio-examples {
365
- margin-top: 20px;
366
- }
367
-
368
- .gradio-examples .gradio-button {
369
- background: rgba(255, 255, 255, 0.8) !important;
370
- border: 1px solid rgba(102, 126, 234, 0.2) !important;
371
- color: #667eea !important;
372
- font-size: 13px !important;
373
- padding: 10px 16px !important;
374
- margin: 4px !important;
375
- border-radius: 15px !important;
376
- transition: all 0.2s ease !important;
377
- }
378
-
379
- .gradio-examples .gradio-button:hover {
380
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
381
- color: white !important;
382
- transform: translateY(-1px) !important;
383
- box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3) !important;
384
- }
385
-
386
- /* Footer styling */
387
- .footer-container {
388
- background: rgba(255, 255, 255, 0.9);
389
- backdrop-filter: blur(20px);
390
- border-radius: 20px;
391
- padding: 20px;
392
- margin-top: 24px;
393
- box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
394
- border: 1px solid rgba(255, 255, 255, 0.2);
395
- text-align: center;
396
- }
397
-
398
- /* Animations */
399
- @keyframes fadeInUp {
400
- from {
401
- opacity: 0;
402
- transform: translateY(30px);
403
- }
404
- to {
405
- opacity: 1;
406
- transform: translateY(0);
407
- }
408
- }
409
-
410
- @keyframes pulse {
411
- 0%, 100% {
412
- opacity: 1;
413
- }
414
- 50% {
415
- opacity: 0.5;
416
- }
417
- }
418
-
419
- @keyframes slideIn {
420
- from {
421
- opacity: 0;
422
- transform: translateX(-20px);
423
- }
424
- to {
425
- opacity: 1;
426
- transform: translateX(0);
427
- }
428
- }
429
-
430
- .animate-fade-in {
431
- animation: fadeInUp 0.6s ease-out;
432
- }
433
-
434
- .animate-slide-in {
435
- animation: slideIn 0.4s ease-out;
436
- }
437
-
438
- /* Loading states */
439
- .loading {
440
- position: relative;
441
- overflow: hidden;
442
- }
443
-
444
- .loading::after {
445
- content: '';
446
- position: absolute;
447
- top: 0;
448
- left: -100%;
449
- width: 100%;
450
- height: 100%;
451
- background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
452
- animation: shimmer 1.5s infinite;
453
- }
454
-
455
- @keyframes shimmer {
456
- 0% { left: -100%; }
457
- 100% { left: 100%; }
458
- }
459
-
460
- /* Responsive design */
461
- @media (max-width: 768px) {
462
- .chat-container, .parameter-panel, .header-container {
463
- margin: 12px;
464
- padding: 16px;
465
- border-radius: 16px;
466
- }
467
-
468
- .chatbot .message.user {
469
- margin-left: 10%;
470
- }
471
-
472
- .chatbot .message.bot {
473
- margin-right: 10%;
474
- }
475
- }
476
-
477
- /* Dark mode support */
478
- @media (prefers-color-scheme: dark) {
479
- .gradio-container {
480
- background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
481
- }
482
-
483
- .chat-container, .parameter-panel, .header-container, .footer-container {
484
- background: rgba(45, 55, 72, 0.95);
485
- color: #e2e8f0;
486
- }
487
-
488
- .chatbot .message.bot {
489
- background: linear-gradient(135deg, #4a5568 0%, #2d3748 100%);
490
- color: #e2e8f0;
491
- }
492
  }
493
  """
494
 
@@ -502,76 +222,29 @@ with gr.Blocks(
502
  <meta name="description" content="Chat with Dhanishtha-2.0-preview - The world's first LLM with multi-step reasoning capabilities">
503
  """
504
  ) as demo:
505
- # Header Section
506
- with gr.Row():
507
- with gr.Column():
508
- gr.HTML("""
509
- <div style="text-align: center; padding: 20px 0;">
510
- <h1 style="font-size: 3em; font-weight: 700; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin: 0; font-family: 'Inter', sans-serif;">
511
- 🧠 Dhanishtha-2.0-preview
512
- </h1>
513
- <p style="font-size: 1.2em; color: #6c757d; margin: 10px 0 0 0; font-weight: 400;">
514
- Advanced Reasoning AI with Multi-Step Thinking
515
- </p>
516
- </div>
517
- """)
518
-
519
- # Feature highlights
520
- with gr.Row():
521
- with gr.Column(scale=1):
522
- gr.HTML("""
523
- <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #f0f8ff 0%, #e6f3ff 100%); border-radius: 15px; border-left: 4px solid #4a90e2;">
524
- <div style="font-size: 2em; margin-bottom: 8px;">🧠</div>
525
- <div style="font-weight: 600; color: #4a90e2;">Think Blocks</div>
526
- <div style="font-size: 0.9em; color: #6c757d;">Internal reasoning process</div>
527
- </div>
528
- """)
529
- with gr.Column(scale=1):
530
- gr.HTML("""
531
- <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%); border-radius: 15px; border-left: 4px solid #28a745;">
532
- <div style="font-size: 2em; margin-bottom: 8px;">💚</div>
533
- <div style="font-weight: 600; color: #28a745;">Ser Blocks</div>
534
- <div style="font-size: 0.9em; color: #6c757d;">Emotional understanding</div>
535
- </div>
536
- """)
537
- with gr.Column(scale=1):
538
- gr.HTML("""
539
- <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #fff5f5 0%, #fed7d7 100%); border-radius: 15px; border-left: 4px solid #e53e3e;">
540
- <div style="font-size: 2em; margin-bottom: 8px;">⚡</div>
541
- <div style="font-weight: 600; color: #e53e3e;">Real-time</div>
542
- <div style="font-size: 0.9em; color: #6c757d;">Streaming responses</div>
543
- </div>
544
- """)
545
- with gr.Column(scale=1):
546
- gr.HTML("""
547
- <div style="text-align: center; padding: 15px; background: linear-gradient(135deg, #fefcbf 0%, #fef08a 100%); border-radius: 15px; border-left: 4px solid #f59e0b;">
548
- <div style="font-size: 2em; margin-bottom: 8px;">🎯</div>
549
- <div style="font-weight: 600; color: #f59e0b;">Precise</div>
550
- <div style="font-size: 0.9em; color: #6c757d;">Step-by-step solutions</div>
551
- </div>
552
- """)
553
 
554
  # Main Chat Interface
555
  with gr.Row():
556
  with gr.Column(scale=4):
557
- # Status indicator
558
- gr.HTML("""
559
- <div style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding: 12px 20px; background: linear-gradient(135deg, #e8f5e8 0%, #f0fff4 100%); border-radius: 12px; border-left: 4px solid #28a745;">
560
- <div style="display: flex; align-items: center;">
561
- <div style="width: 8px; height: 8px; background: #28a745; border-radius: 50%; margin-right: 8px; animation: pulse 2s infinite;"></div>
562
- <span style="font-weight: 600; color: #28a745;">Model Ready</span>
563
- </div>
564
- <div style="font-size: 0.9em; color: #6c757d;">
565
- HelpingAI/Dhanishtha-2.0-preview
566
- </div>
567
- </div>
568
- """)
569
-
570
  chatbot = gr.Chatbot(
571
  [],
572
  elem_id="chatbot",
573
  type='messages',
574
- height=650,
575
  show_copy_button=True,
576
  show_share_button=True,
577
  avatar_images=("👤", "🤖"),
@@ -580,51 +253,32 @@ with gr.Blocks(
580
  latex_delimiters=[
581
  {"left": "$$", "right": "$$", "display": True},
582
  {"left": "$", "right": "$", "display": False}
583
- ],
584
- container=True,
585
- scale=1
586
  )
587
 
588
- # Enhanced input section
589
  with gr.Row():
590
- with gr.Column(scale=1):
591
- msg = gr.Textbox(
592
- container=False,
593
- placeholder="💭 Ask me anything! I'll show you my thinking and reasoning process...",
594
- label="",
595
- autofocus=True,
596
- lines=1,
597
- max_lines=4
598
- )
599
- with gr.Column(scale=0, min_width=120):
600
- with gr.Row():
601
- send_btn = gr.Button(
602
- "🚀 Send",
603
- variant="primary",
604
- size="lg"
605
- )
606
- clear_btn = gr.Button(
607
- "🗑️",
608
- variant="secondary",
609
- size="lg"
610
- )
611
-
612
- with gr.Column(scale=1, min_width=320):
613
- # Parameter header
614
- gr.HTML("""
615
- <div style="text-align: center; margin-bottom: 20px;">
616
- <h3 style="margin: 0; color: #4a5568; font-weight: 600;">⚙️ Generation Settings</h3>
617
- <p style="margin: 5px 0 0 0; color: #6c757d; font-size: 0.9em;">Fine-tune the AI's responses</p>
618
- </div>
619
- """)
620
-
621
- # Enhanced sliders with better styling
622
  max_tokens = gr.Slider(
623
  minimum=50,
624
  maximum=8192,
625
  value=2048,
626
  step=50,
627
- label="🎯 Max Tokens",
628
  info="Maximum number of tokens to generate"
629
  )
630
 
@@ -633,7 +287,7 @@ with gr.Blocks(
633
  maximum=2.0,
634
  value=0.7,
635
  step=0.1,
636
- label="🌡️ Temperature",
637
  info="Higher = more creative, Lower = more focused"
638
  )
639
 
@@ -642,73 +296,38 @@ with gr.Blocks(
642
  maximum=1.0,
643
  value=0.9,
644
  step=0.05,
645
- label="🎲 Top-p",
646
  info="Nucleus sampling threshold"
647
  )
648
 
649
- # Action buttons
650
- with gr.Row():
651
- stop_btn = gr.Button(
652
- "⏹️ Stop",
653
- variant="stop",
654
- scale=1
655
- )
656
-
657
- # Model information card
658
- gr.HTML("""
659
- <div style="margin-top: 24px; padding: 20px; background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 16px; border: 1px solid rgba(0,0,0,0.05);">
660
- <h4 style="margin: 0 0 12px 0; color: #4a5568; font-weight: 600; display: flex; align-items: center;">
661
- <span style="margin-right: 8px;">🧠</span> Model Information
662
- </h4>
663
- <div style="space-y: 8px;">
664
- <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
665
- <span style="color: #6c757d; font-size: 0.9em;">Model:</span>
666
- <span style="color: #4a5568; font-weight: 500; font-size: 0.9em;">Dhanishtha-2.0-preview</span>
667
- </div>
668
- <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
669
- <span style="color: #6c757d; font-size: 0.9em;">Type:</span>
670
- <span style="color: #4a5568; font-weight: 500; font-size: 0.9em;">Reasoning LLM</span>
671
- </div>
672
- <div style="display: flex; justify-content: space-between; margin-bottom: 8px;">
673
- <span style="color: #6c757d; font-size: 0.9em;">Features:</span>
674
- <span style="color: #4a5568; font-weight: 500; font-size: 0.9em;">Think + Ser blocks</span>
675
- </div>
676
- <div style="margin-top: 12px; padding: 8px; background: rgba(74, 144, 226, 0.1); border-radius: 8px; border-left: 3px solid #4a90e2;">
677
- <div style="font-size: 0.85em; color: #4a90e2; font-weight: 500;">💡 Tip</div>
678
- <div style="font-size: 0.8em; color: #6c757d; margin-top: 4px;">Ask complex questions to see multi-step reasoning in action!</div>
679
- </div>
680
- </div>
681
- </div>
682
- """)
683
-
684
- # Enhanced Examples Section
685
- with gr.Row():
686
- with gr.Column():
687
- gr.HTML("""
688
- <div style="text-align: center; margin: 24px 0 16px 0;">
689
- <h3 style="margin: 0; color: #4a5568; font-weight: 600;">💡 Try These Examples</h3>
690
- <p style="margin: 5px 0 0 0; color: #6c757d; font-size: 0.9em;">Click any example to see the AI's thinking process</p>
691
- </div>
692
- """)
693
-
694
- gr.Examples(
695
- examples=[
696
- ["🧮 Solve this step by step: What is 15% of 240?"],
697
- ["🔤 How many letter 'r' are in the words 'strawberry' and 'raspberry'?"],
698
- ["🤖 Hello! Can you introduce yourself and show me how you think?"],
699
- ["⚛️ Explain quantum entanglement in simple terms with examples"],
700
- ["🐍 Write a Python function to find the factorial of a number"],
701
- ["🌱 What are the pros and cons of renewable energy sources?"],
702
- ["🧠 What's the difference between AI and machine learning?"],
703
- ["🎨 Create a haiku about artificial intelligence and consciousness"],
704
- ["🌌 Why is the sky blue? Explain using physics principles"],
705
- ["📊 Compare bubble sort and quick sort algorithms"],
706
- ["🎯 Plan a 7-day trip to Japan with budget considerations"],
707
- ["🔬 How does CRISPR gene editing work in simple terms?"]
708
- ],
709
- inputs=msg,
710
- examples_per_page=6
711
  )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
712
 
713
  # Event handlers
714
  def clear_chat():
@@ -739,62 +358,18 @@ with gr.Blocks(
739
  show_progress=False
740
  )
741
 
742
- # Enhanced Footer
743
- with gr.Row():
744
- with gr.Column():
745
- gr.HTML("""
746
- <div style="text-align: center; padding: 20px 0;">
747
- <div style="display: flex; justify-content: center; align-items: center; margin-bottom: 16px;">
748
- <div style="height: 1px; background: linear-gradient(90deg, transparent, #667eea, transparent); flex: 1;"></div>
749
- <span style="margin: 0 20px; color: #6c757d; font-weight: 500;">Technical Specifications</span>
750
- <div style="height: 1px; background: linear-gradient(90deg, transparent, #667eea, transparent); flex: 1;"></div>
751
- </div>
752
-
753
- <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px;">
754
- <div style="text-align: center;">
755
- <div style="font-size: 1.5em; margin-bottom: 8px;">🧠</div>
756
- <div style="font-weight: 600; color: #4a5568;">Model Architecture</div>
757
- <div style="font-size: 0.9em; color: #6c757d;">Transformer-based reasoning</div>
758
- </div>
759
- <div style="text-align: center;">
760
- <div style="font-size: 1.5em; margin-bottom: 8px;">⚡</div>
761
- <div style="font-weight: 600; color: #4a5568;">Real-time Streaming</div>
762
- <div style="font-size: 0.9em; color: #6c757d;">Token-by-token generation</div>
763
- </div>
764
- <div style="text-align: center;">
765
- <div style="font-size: 1.5em; margin-bottom: 8px;">🎯</div>
766
- <div style="font-weight: 600; color: #4a5568;">Advanced Reasoning</div>
767
- <div style="font-size: 0.9em; color: #6c757d;">Multi-step thinking process</div>
768
- </div>
769
- <div style="text-align: center;">
770
- <div style="font-size: 1.5em; margin-bottom: 8px;">🔧</div>
771
- <div style="font-weight: 600; color: #4a5568;">Custom Sampling</div>
772
- <div style="font-size: 0.9em; color: #6c757d;">Temperature & Top-p control</div>
773
- </div>
774
- </div>
775
-
776
- <div style="background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%); border-radius: 12px; padding: 16px; margin: 16px 0; border: 1px solid rgba(0,0,0,0.05);">
777
- <div style="font-weight: 600; color: #4a5568; margin-bottom: 8px;">🌟 Key Features</div>
778
- <div style="display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;">
779
- <span style="background: #e3f2fd; color: #1976d2; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Think Blocks</span>
780
- <span style="background: #e8f5e8; color: #2e7d32; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Ser Blocks</span>
781
- <span style="background: #fff3e0; color: #f57c00; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Real-time Streaming</span>
782
- <span style="background: #fce4ec; color: #c2185b; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">LaTeX Support</span>
783
- <span style="background: #f3e5f5; color: #7b1fa2; padding: 4px 12px; border-radius: 20px; font-size: 0.85em;">Code Highlighting</span>
784
- </div>
785
- </div>
786
-
787
- <div style="margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(0,0,0,0.1);">
788
- <div style="color: #6c757d; font-size: 0.9em;">
789
- Built with ❤️ using <strong>Gradio</strong> and <strong>Transformers</strong> |
790
- Model: <strong>HelpingAI/Dhanishtha-2.0-preview</strong>
791
- </div>
792
- <div style="color: #6c757d; font-size: 0.8em; margin-top: 4px;">
793
- Experience the future of AI reasoning with transparent thinking processes
794
- </div>
795
- </div>
796
- </div>
797
- """)
798
 
799
  if __name__ == "__main__":
800
  # Launch with enhanced configuration
 
204
  print("Initializing model...")
205
  load_model()
206
 
207
+ # Minimal CSS - only for think and ser blocks
208
  custom_css = """
209
+ /* Only essential styling for think and ser blocks */
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
210
  .chatbot {
211
+ font-family: system-ui, -apple-system, sans-serif;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
212
  }
213
  """
214
 
 
222
  <meta name="description" content="Chat with Dhanishtha-2.0-preview - The world's first LLM with multi-step reasoning capabilities">
223
  """
224
  ) as demo:
225
+ # Simple Header
226
+ gr.Markdown(
227
+ """
228
+ # 🧠 Dhanishtha-2.0-preview Chat
229
+
230
+ Chat with the **HelpingAI/Dhanishtha-2.0-preview** model - Advanced Reasoning AI with Multi-Step Thinking
231
+
232
+ ### Features:
233
+ - 🧠 **Think Blocks**: Internal reasoning process (blue styling)
234
+ - 💚 **Ser Blocks**: Emotional understanding (green styling)
235
+ - ⚡ **Real-time Streaming**: Token-by-token generation
236
+ - 🎯 **Step-by-step Solutions**: Detailed problem solving
237
+ """
238
+ )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
239
 
240
  # Main Chat Interface
241
  with gr.Row():
242
  with gr.Column(scale=4):
 
 
 
 
 
 
 
 
 
 
 
 
 
243
  chatbot = gr.Chatbot(
244
  [],
245
  elem_id="chatbot",
246
  type='messages',
247
+ height=600,
248
  show_copy_button=True,
249
  show_share_button=True,
250
  avatar_images=("👤", "🤖"),
 
253
  latex_delimiters=[
254
  {"left": "$$", "right": "$$", "display": True},
255
  {"left": "$", "right": "$", "display": False}
256
+ ]
 
 
257
  )
258
 
259
+ # Simple input section
260
  with gr.Row():
261
+ msg = gr.Textbox(
262
+ container=False,
263
+ placeholder="Ask me anything! I'll show you my thinking and reasoning process...",
264
+ label="Message",
265
+ autofocus=True,
266
+ lines=1,
267
+ max_lines=3,
268
+ scale=7
269
+ )
270
+ send_btn = gr.Button("Send", variant="primary", scale=1)
271
+ clear_btn = gr.Button("Clear", variant="secondary", scale=1)
272
+
273
+ with gr.Column(scale=1, min_width=300):
274
+ gr.Markdown("### ⚙️ Generation Parameters")
275
+
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
276
  max_tokens = gr.Slider(
277
  minimum=50,
278
  maximum=8192,
279
  value=2048,
280
  step=50,
281
+ label="Max Tokens",
282
  info="Maximum number of tokens to generate"
283
  )
284
 
 
287
  maximum=2.0,
288
  value=0.7,
289
  step=0.1,
290
+ label="Temperature",
291
  info="Higher = more creative, Lower = more focused"
292
  )
293
 
 
296
  maximum=1.0,
297
  value=0.9,
298
  step=0.05,
299
+ label="Top-p",
300
  info="Nucleus sampling threshold"
301
  )
302
 
303
+ gr.Markdown("### 📊 Model Info")
304
+ gr.Markdown(
305
+ """
306
+ **Model**: HelpingAI/Dhanishtha-2.0-preview
307
+ **Type**: Reasoning LLM with thinking blocks
308
+ **Features**: Multi-step reasoning, self-evaluation
309
+ **Blocks**: Think (blue) + Ser (green)
310
+ """
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
311
  )
312
+
313
+ # Examples Section
314
+ gr.Examples(
315
+ examples=[
316
+ ["Solve this step by step: What is 15% of 240?"],
317
+ ["How many letter 'r' are in the words 'strawberry' and 'raspberry'?"],
318
+ ["Hello! Can you introduce yourself and show me how you think?"],
319
+ ["Explain quantum entanglement in simple terms"],
320
+ ["Write a Python function to find the factorial of a number"],
321
+ ["What are the pros and cons of renewable energy?"],
322
+ ["What's the difference between AI and machine learning?"],
323
+ ["Create a haiku about artificial intelligence"],
324
+ ["Why is the sky blue? Explain using physics principles"],
325
+ ["Compare bubble sort and quick sort algorithms"]
326
+ ],
327
+ inputs=msg,
328
+ label="Example Prompts - Try these to see the thinking process!",
329
+ examples_per_page=5
330
+ )
331
 
332
  # Event handlers
333
  def clear_chat():
 
358
  show_progress=False
359
  )
360
 
361
+ # Simple Footer
362
+ gr.Markdown(
363
+ """
364
+ ---
365
+ ### 🔧 Technical Details
366
+ - **Model**: HelpingAI/Dhanishtha-2.0-preview
367
+ - **Reasoning**: Multi-step thinking with `<think>` and `<ser>` blocks
368
+
369
+ **Note**: This interface streams responses token by token and formats thinking blocks for better readability.
370
+
371
+ """
372
+ )
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
373
 
374
  if __name__ == "__main__":
375
  # Launch with enhanced configuration