ჩვენ ეს გამოვცადეთ სხვადასხვა ტიპის აპლიკაციების შექმნით. თითოეული მათგანი არის ერთ პითონ ფაილში, ყოველგვარი აგების (build) ეტაპის გარეშე, და მისი განთავსება Hugging Face Spaces-ზე წამებშია შესაძლებელი. პომოდოროს ტაიმერი: ფოკუსირების ტაიმერი, სადაც პიქსელ-არტის ხე იზრდება მუშაობისას. იწყება თესლიდან, უშვებს ტოტებს, ივითარებს ფოთლებს. სესიის დასრულების შემდეგ ხე თქვენს ტყეს უერთდება. სესიის თვალყურის დევნება, თემის შეცვლა, შესვენების რეჟიმები — ყველაფერი ინტერაქტიულია, ყველაფერი ერთ ფაილში. ხის ანიმაცია ჩვეულებრივ მოითხოვდა ცალკე React კომპონენტს. აქ ეს არის მხოლოდ CSS keyframes css_template-ში და მდგომარეობის განახლებები js_on_load-ში. GitHub-ის წვლილის სითბური რუკა (Heatmap): დააწკაპუნეთ ნებისმიერ უჯრედზე წვლილის გადასართავად. მრავალი ფერის თემა. შაბლონების გენერატორები (ზოლები, სეზონური, შემთხვევითი). ცოცხალი სტატისტიკა, რომელიც განახლდება რედაქტირებისას. კანბანის დაფა: სრულფასოვანი drag-and-drop სვეტებს შორის. ჩაშენებული რედაქტირება (ორმაგი დაწკაპუნება ნებისმიერ ბარათზე). ძიების ფუნქცია, რომელსაც შეუძლია რეალურ დროში გაფილტროს. დასაკეცი სვეტები. Drag-and-drop ჩვეულებრივ ნიშნავს ბიბლიოთეკის ჩართვას. აქ ეს არის მშობლიური HTML5 drag მოვლენები, რომლებიც js_on_load-შია დაკავშირებული, მდგომარეობის სინქრონიზაცია Python-თან კი ხდება trigger('change')-ის მეშვეობით. Spin-to-Win ბორბალი: გლუვი CSS ანიმაცია, ბრუნვის მდგომარეობა, რომელიც გრძელდება ხელახალი რენდერირების დროსაც კი. წინასწარ დაყენებული კონფიგურაციები დიახ/არა გადაწყვეტილებებისთვის, რესტორნის არჩევისთვის, გუნდის შერჩევისთვის. ასევე შეგიძლიათ დაამატოთ მორგებული მბრუნავი სეგმენტები სწრაფად. აი, სად ხდება gr.HTML განსაკუთრებით საინტერესო ML სამუშაოსთვის: შეგიძლიათ შექმნათ სპეციალიზებული კომპონენტები, რომლებსაც შეუძლიათ თქვენი ზუსტი გამომავალი ფორმატის დამუშავება, შემდეგ კი მათი გამოყენება ისევე, როგორც ნებისმიერი ჩაშენებული Gradio კომპონენტის. ამოცნობის მაყურებელი (Detection Viewer): მორგებული მაყურებელი ობიექტის ამოცნობის, ინსტანციური სეგმენტაციისა და პოზის შეფასების შედეგებისთვის. აჩვენებს შემომფარგვლელ ველებს (bounding boxes), სეგმენტაციის ნიღბებს (segmentation masks), საკვანძო წერტილებს (keypoints) და ჩონჩხის კავშირებს (skeleton connections) — ეს ყველაფერი მრავალჯერადი გამოყენების gr.HTML ქვეკლასშია, რომელიც პირდაპირ უკავშირდება თქვენი მოდელის პაიპლაინს. საზოგადოებამ gr.HTML-ით რამდენიმე კრეატიული კომპონენტიც შექმნა: 3D კამერის კონტროლი სურათის რედაქტირებისთვის: სრულფასოვანი Three.js viewport Gradio აპლიკაციაში! გადაათრიეთ სახელურები აზიმუტის, სიმაღლისა და მანძილის გასაკონტროლებლად. თქვენი ატვირთული სურათი ჩნდება 3D სცენაში, ხოლო კამერის პარამეტრები პირდაპირ მიეწოდება Qwen-ის უახლეს სურათის რედაქტირების მოდელს. ასეთი სახის ინტერაქტიული 3D კონტროლი ჩვეულებრივ მოითხოვდა ცალკე ფრონტენდს — Gradio-სთან ერთად ეს მხოლოდ ერთი gr.HTML ქვეკლასია 🔥 რეალურ დროში მეტყველების ტრანსკრიფცია: ცოცხალი ტრანსკრიფცია Mistral-ის Voxtral მოდელით. ტრანსკრიფციის ჩვენება არის მორგებული gr.HTML კომპონენტი ანიმირებული სტატუსის ნიშნებით, ცოცხალი WPM მრიცხველით და სტილიზებული გამომავალით, რომელიც განახლდება საუბრისას. რეალურ დროში UI უკუკავშირი React-ის გამოყენების გარეშე! ყოველი gr.HTML კომპონენტი სამ შაბლონს იღებს: ${value} შეჰყავს Python-ის მდგომარეობა. props.value განაახლებს მას JavaScript-დან. trigger('change') უკან სინქრონიზდება Python-თან. ეს არის მთელი API. მრავალჯერადი გამოყენების კომპონენტებისთვის, gr.HTML-ის ქვეკლასი შექმენით: ახლა Heatmap() მუშაობს gr.Image() ან gr.Slider()-ის მსგავსად — გამოიყენეთ ის Blocks-ში, დაუკავშირეთ მოვლენების დამმუშავებლები, რაც გჭირდებათ. როდესაც თქვენს LLM-ს სთხოვთ შექმნას მორგებული კომპონენტი, ერთფაილიანი გამომავალი ყველაფერია. არანაირი "ახლა შექმენით სტილის ფაილი" ან "ეს თქვენს build კონფიგურაციას დაუკავშირეთ." მხოლოდ ერთი Python ფაილი, რომელიც დაუყოვნებლივ მუშაობს. უკუკავშირის მარყუჟი ასე გამოიყურება: აღწერეთ რა გსურთ → მიიღეთ კოდი → gradio app.py → იხილეთ მისი მუშაობა → აღწერეთ რა უნდა გამოსწორდეს → გაიმეორეთ. თითოეული ციკლი წამებს გრძელდება Gradio-ს გადატვირთვის რეჟიმში. განათავსეთ Spaces-ზე gradio deploy-ით ან გააზიარეთ დროებითი ბმული demo.launch(share=True)-ით. იდეიდან ცოცხალ აპლიკაციამდე რამდენიმე წამში. Gradio გთავაზობთ 32 ინტერაქტიულ კომპონენტს, მაგრამ ზოგჯერ თქვენს სრულყოფილ AI ვებ აპლიკაციას რაღაც განსაკუთრებული სჭირდება. სწორედ აქ შემოდის gr.HTML. თუ იდეა გაქვთ, სცადეთ მისი აშენება gr.HTML-ით: აღწერეთ რა გსურთ თქვენს LLM-ს, შექმენით კოდი, გაუშვით. შეიძლება გაგიკვირდეთ, რისი გამოქვეყნება შეგიძლიათ 5 წუთში.