Spaces:
Running
Running
| Evet, **`<iframe>` ile** istediğin heatmap sayfalarını doğrudan başka bir web sayfasına gömebilirsin. | |
| Senin verdiğin kod, HTML dosyasında veya destekleyen bir platformda **çalışır** ve her bir heatmap’i ayrı ayrı gömülü olarak gösterir. | |
| --- | |
| ## Örnek: Tüm Heatmap’leri Yan Yana veya Alt Alta Göstermek | |
| ```html | |
| <div style="display: flex; flex-direction: column; gap: 20px;"> | |
| <iframe | |
| src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar" | |
| style="width: 100%; height: 300px;" | |
| frameborder="0" | |
| ></iframe> | |
| <iframe | |
| src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub" | |
| style="width: 100%; height: 300px;" | |
| frameborder="0" | |
| ></iframe> | |
| <iframe | |
| src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS" | |
| style="width: 100%; height: 300px;" | |
| frameborder="0" | |
| ></iframe> | |
| <iframe | |
| src="https://cfahlgren1-model-release-heatmap.hf.space/Vyvo" | |
| style="width: 100%; height: 300px;" | |
| frameborder="0" | |
| ></iframe> | |
| </div> | |
| ``` | |
| > **Not:** | |
| > - `class="w-full h-[300px]"` TailwindCSS içindir, klasik HTML’de `style="width: 100%; height: 300px;"` olarak kullanabilirsin. | |
| > - Bu kodu **kendi web sitende**, **GitHub Pages’te** veya **Hugging Face Space’in HTML tabanlı bir arayüzünde** kullanabilirsin. | |
| --- | |
| ## Platform Desteği | |
| | Platform | `<iframe>` Desteği | Açıklama | | |
| |-------------------------|:------------------:|-----------------------------------------| | |
| | Kendi HTML/Web Sitesi | ✔️ | Sorunsuz çalışır | | |
| | GitHub README.md | ❌ | ÇALIŞMAZ (iframe desteklenmez) | | |
| | Hugging Face Space (HTML/Gradio) | ⚠️ | HTML bloklarında çalışabilir, Gradio Markdown’da çalışmaz | | |
| | Notion, Medium vb. | ⚠️ | Bazı platformlarda çalışır, bazılarında çalışmaz | | |
| --- | |
| ## **Sonuç** | |
| - Kendi web sitende veya HTML destekli bir platformda verdiğin iframe kodunu kullanabilirsin. | |
| - Eğer **GitHub README.md** veya Markdown tabanlı bir ortamdaysan, iframe çalışmaz. | |
| - Hugging Face Space’te Streamlit veya saf HTML ile de gömebilirsin. | |
| --- | |
| ### **Ekstra: Sadece HTML Dosyası Örneği** | |
| ```html | |
| <html> | |
| <head> | |
| <title>Hugging Face Heatmaps</title> | |
| </head> | |
| <body style="background: #111; color: #fff;"> | |
| <h1>My Hugging Face Heatmaps</h1> | |
| <div style="display: flex; flex-direction: column; gap: 20px;"> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/kadirnar" style="width: 100%; height: 300px;" frameborder="0"></iframe> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/OpenSpeechHub" style="width: 100%; height: 300px;" frameborder="0"></iframe> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Closed-TTS" style="width: 100%; height: 300px;" frameborder="0"></iframe> | |
| <iframe src="https://cfahlgren1-model-release-heatmap.hf.space/Vyvo" style="width: 100%; height: 300px;" frameborder="0"></iframe> | |
| </div> | |
| </body> | |
| </html> | |
| ``` | |
| --- |