Artifact Node
Artifact node'u, SkyStudio workflow'larında görsel çıktılar (HTML sayfaları, grafikler, tablolar) üretmek için kullanılır. Gelen veriyi ve talimatları yapay zeka yardımıyla işleyerek kullanıcıya interaktif bir görsel sunar. Harici bir servis bağlantısı gerektirmez.
🎬 Videoyu izlemek için tıklayın → []
Operasyonlar
Artifact node'u 4 operasyon sunmaktadır:
| Operasyon | Kategori | Açıklama |
|---|---|---|
| Generate HTML Page | Öne Çıkan | Prompt ve veriden AI destekli HTML sayfası üretir |
| Generate Chart | Öne Çıkan | Prompt ve veriden AI destekli grafik oluşturur |
| HTML from Template | Standart | Hazır şablona veri enjekte ederek HTML sayfası üretir |
| Auto Chart from Data | Standart | JSON verisini otomatik olarak grafiğe dönüştürür |
Generate HTML Page
Bir prompt ve JSON veri kaynağından AI destekli, özelleştirilebilir bir HTML sayfası üretir. Raporlar, paneller (dashboard) ve dinamik içerik sayfaları oluşturmak için kullanılır.
Parametreler
| Parametre | Zorunlu | Açıklama |
|---|---|---|
| Prompt | Evet | Sayfanın nasıl görünmesi gerektiğini tarif eden talimat (örn. "Satış verilerini kart düzeninde göster") |
| Data (JSON) | Hayır | Sayfada gösterilecek JSON formatındaki veri |
| Style | Hayır | Genel stil tercihi (açılır menüden seçilir) |
| CSS Framework | Hayır | Kullanılacak CSS framework'ü (örn. Tailwind, Bootstrap) |
| System Prompt Override | Hayır | AI'ın varsayılan davranışını geçersiz kılan özel sistem talimatı |
Kullanım Örneği
Prompt: "Aylık satış rakamlarını başlık, özet kartları ve tablo içeren profesyonel bir rapor sayfası olarak göster"
Data (JSON):
{
"month": "Nisan 2024",
"total_sales": 125000,
"top_product": "Premium Lisans",
"deals": [
{ "name": "ABC A.Ş.", "amount": 45000 },
{ "name": "XYZ Ltd.", "amount": 30000 }
]
}
Örnek Çıktı
Workflow çalıştığında kullanıcıya interaktif bir HTML sayfası sunulur. Sayfa, belirtilen stil ve CSS framework'üne göre biçimlendirilmiş olarak görüntülenir.
Generate Chart
Bir prompt ve JSON veri kaynağından AI destekli grafik oluşturur. Çizgi, çubuk, pasta grafik gibi farklı türleri destekler ve satış analizi, performans takibi gibi veri görselleştirme senaryolarında kullanılır.
Parametreler
| Parametre | Zorunlu | Açıklama |
|---|---|---|
| Prompt | Evet | Grafiğin nasıl oluşturulacağını tarif eden talimat |
| Data (JSON) | Hayır | Grafikte kullanılacak JSON formatındaki veri |
| Chart Type | Hayır | Grafik türü (açılır menüden seçilir: Bar, Line, Pie, vb.) |
| Chart Title | Hayır | Grafiğin başlığı |
| Style | Hayır | Genel stil tercihi |
| System Prompt Override | Hayır | AI'ın varsayılan davranışını geçersiz kılan özel sistem talimatı |
Kullanım Örneği
Prompt: "Son 6 aylık geliri aylara göre çubuk grafikte göster"
Chart Type: Bar
Chart Title: "2024 Aylık Gelir Performansı"
Data (JSON):
[
{ "month": "Ocak", "revenue": 85000 },
{ "month": "Şubat", "revenue": 92000 },
{ "month": "Mart", "revenue": 110000 },
{ "month": "Nisan", "revenue": 125000 }
]
HTML from Template
Önceden hazırlanmış bir HTML şablonuna JSON verisi enjekte ederek statik bir HTML sayfası üretir. AI kullanmadan deterministik, tutarlı çıktılar elde etmek için idealdir.
Parametreler
| Parametre | Zorunlu | Açıklama |
|---|---|---|
| Template | Evet | Veri değişkenlerini içeren HTML şablonu (örn. {{name}}, {{amount}} gibi yer tutucularla) |
| Data (JSON) | Hayır | Şablondaki yer tutuculara enjekte edilecek JSON verisi |
| Style | Hayır | Genel stil tercihi |
| Language | Hayır | Çıktının dili (açılır menüden seçilir) |
Kullanım Örneği
Template:
<h1>Hoş Geldiniz, {{firstname}}!</h1>
<p>Şirket: {{company}}</p>
<p>Teklif Tutarı: {{amount}} TL</p>
Data (JSON):
{
"firstname": "Ahmet",
"company": "Örnek A.Ş.",
"amount": "15.000"
}
Auto Chart from Data
JSON verisini analiz ederek otomatik olarak en uygun grafik türünü seçer ve görselleştirir. Prompt veya grafik türü belirtmeye gerek kalmadan hızlı veri görselleştirme için kullanılır.
Parametreler
| Parametre | Zorunlu | Açıklama |
|---|---|---|
| Data (JSON) | Evet | Grafiğe dönüştürülecek JSON formatındaki veri |
| Title (optional) | Hayır | Grafiğin başlığı |
| Style | Hayır | Genel stil tercihi |
Kullanım Örneği
Data (JSON):
[
{ "category": "Yazılım", "sales": 45000 },
{ "category": "Donanım", "sales": 30000 },
{ "category": "Hizmet", "sales": 20000 }
]
Title: "Ürün Kategorisine Göre Satışlar"
Node, veriyi otomatik olarak analiz eder ve en uygun grafik türünü (bu örnekte pasta veya çubuk grafik) seçerek çıktı üretir.
Hızlı Başlangıç Örnekleri
Örnek 1: Günlük Satış Raporu Sayfası
HubSpot'tan çekilen fırsat verilerini HTML raporuna dönüştüren workflow:
Schedule (Her sabah 08:00) → Fırsatları Getir (HubSpot) → Generate HTML Page
Generate HTML Page ayarları:
- Prompt:
"Fırsatları aşamalara göre gruplandır, toplam tutarı göster, renkli kart düzeninde listele" - Data (JSON):
{{hubspot.results}} - CSS Framework:
Tailwind
Örnek 2: Satış Performans Grafiği
Veritabanından çekilen aylık gelir verisini otomatik grafiğe dönüştüren workflow:
Schedule (Her hafta) → Veri Çek → Generate Chart → Slack Mesajı (grafik linki)
Generate Chart ayarları:
- Prompt:
"Aylık gelir değişimini göster, büyüme eğilimini vurgula" - Chart Type:
Line - Chart Title:
"Aylık Gelir Trendi" - Data (JSON):
{{db.results}}
Örnek 3: Müşteri Teklif Sayfası
Kişi bilgilerinden kişiselleştirilmiş teklif HTML'i üreten workflow:
Webhook → Kişi Getir (HubSpot) → HTML from Template
HTML from Template ayarları:
- Template: Önceden hazırlanmış teklif HTML şablonu (
{{firstname}},{{company}},{{amount}}yer tutucularıyla) - Data (JSON):
{{hubspot.contact}} - Language:
Turkish
Örnek 4: Anlık Veri Görselleştirme
Kullanıcının yapıştırdığı ham JSON'ı otomatik grafiğe dönüştüren chatbot:
Metin Girişi (JSON veri) → Auto Chart from Data → Görsel Çıktı
Auto Chart from Data ayarları:
- Data (JSON):
{{input.text}} - Title:
"Veri Analizi"
Sık Karşılaşılan Hatalar
| Hata | Olası Neden | Çözüm |
|---|---|---|
| Boş veya bozuk HTML çıktısı | Data (JSON) alanındaki veri geçersiz JSON formatında | Veriyi önceki bir node'da JSON formatına dönüştürün; geçerli JSON için " işaretlerine dikkat edin |
| Grafik oluşturulmuyor | JSON verisinde sayısal alan bulunamadı | Grafik verisinin sayısal değerler içerdiğinden emin olun |
| Şablon yer tutucuları dolmuyor | Template'deki değişken adları JSON'daki alan adlarıyla eşleşmiyor | {{firstname}} ile JSON'daki "firstname" anahtarının birebir aynı olduğunu kontrol edin |
| Stil uygulanmıyor | CSS Framework seçimi boş bırakıldı | CSS Framework açılır menüsünden bir seçenek belirtin |
Notlar
- Artifact node'u herhangi bir harici servis bağlantısı gerektirmez; kullanım için özel bir kimlik doğrulama adımı yoktur.
- Generate HTML Page ve Generate Chart operasyonları AI kullandığından, çok büyük JSON verilerinde yanıt süresi artabilir. Büyük verileri önceden filtreleyerek gönderin.
- HTML from Template operasyonu AI kullanmaz; sabit bir şablon üzerinden çalıştığı için deterministik ve hızlı sonuç üretir.
- Auto Chart from Data operasyonu, grafik türünü otomatik seçer. Belirli bir grafik türü istiyorsanız bunun yerine Generate Chart operasyonunu kullanın ve Chart Type alanını doldurun.
- Tüm operasyonların çıktısı SkyStudio'nun Artifact görüntüleme bileşeninde render edilir ve kullanıcıya interaktif olarak sunulur.