berita

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Penulis｜Kelinci Giok Garam dan Lada
Surel｜[email protected]

Saat Claude 3.5 Sonnet dirilis, fungsi demonstrasi Artefak juga diperbarui. Saat itu, saya dikejutkan dengan efek demonstrasinya.

Mengenai Artefak, ini memungkinkan pengguna untuk membuat dan mereferensikan sejumlah besar konten independen dalam percakapan.

Saat kami bertanya kepada Claude tentang “Cuplikan kode, dokumen teks, atau desain situs web” dan konten lainnya, Artefak muncul di jendela khusus, ditampilkan berdampingan dengan percakapan. Jika hasilnya kurang memuaskan, kami dapat segera memodifikasi, mengulangi, dan menyempurnakan kreasi Claude.

Gambar menunjukkan efek HTML yang dihasilkan oleh Pratinjau melalui dialog dengan Claude 3.5 Sonnet di Poe. Alamat dialog: https://poe.com/s/YEms220OFPLfoZhPKfLI

Kini penantiannya akhirnya tibaPoe telah secara resmi memperbarui fungsi Pratinjau, efeknya mirip dengan demonstrasi Artefak secara real-time, dan juga mendukung pembuatan tiga model secara real-time: Claude 3.5 Sonnet, ChatGPT-4o, dan Gemini 1.5 Pro.

Gambar di sebelah kiri menunjukkan pembaruan Claude 3.5 Soneta dan Artefak, dan gambar di sebelah kanan menunjukkan Pratinjau Poe

Menyela sebuah kalimat, berikut penjelasan singkatnyaApa itu Poe?。

Poe adalah platform AI yang diluncurkan oleh Quora, "Zhihu" (komunitas tanya jawab) Amerika Utara, pada akhir tahun 2022. Pengguna dapat berkomunikasi dengan berbagai model AI melaluinya, termasuk model terkenal seperti ChatGPT dan Claude. Tujuan desain asli Poe adalah untuk menyediakan platform obrolan yang beragam, memungkinkan pengguna memilih salah satu yang paling sesuai dari berbagai model AI untuk berinteraksi. Baik itu mengajukan pertanyaan, meminta bantuan pemrograman, atau melakukan percakapan santai, Poe dapat memuaskannya . Ketika Poe memperbarui fungsi demo Pratinjau, saya sangat senang!

Karena sudah banyak bicara, saya tidak sabar lagi. Mari kita lihat beberapa kasus praktis.

1

Skenario 1: Buat halaman web game yang terlihat bagus

Di Internet kita sering melihat berbagai website pengumpulan alat. Jika ada alat yang dapat membantu kita dengan mudah membuat situs koleksi visual kita sendiri, bukankah itu akan menghemat banyak waktu pemrograman? Baru-baru ini saya menemukan situs web game, setiap kali saya mengkliknya, saya merasa seperti membuka kotak buta. Ada berbagai permainan, alat, dan eksperimen jaringan di dalamnya.

Saya hanya ingin tahu: Bisakah saya menggunakan fungsi Pratinjau Poe?Buat halaman demo langsung seperti ini , atau bahkan membangun situs web pengumpulan alat? Untuk memverifikasi ide ini, saya memutuskan untuk mencobanya dengan membuat halaman statis terlebih dahulu.

Saya menggunakan Poe langsung untuk berbicara dengan Claude 3.5 Soneta. Apa yang awalnya hanya berupa pertanyaan tekstual menghasilkan teks dan solusi;

Nanti aku menambahkan"Pratinjau tampilan langsung di Pratinjau”, efek real-time langsung terlihat, dan efeknya sangat bagus.

Tip: https://toms.toys/ Kunjungi halaman ini, buat tutorial game, dan tampilkan langsung di Pratinjau.

Setelah membuatnya, saya mencoba mengklik kata-kata merah, tetapi ternyata kliknya tidak bergerak, jadi halaman web yang dihasilkan adalah halaman web statis, tetapi terlihat 80% mirip. Warna logo pada dasarnya cocok, dan kotak indeks lainnya juga sangat jelas, setidaknya memiliki cita rasa versi aslinya.

Catatan percakapan: https://poe.com/s/Pe9cXFpmFHQqPAZhZOgU

Sekarang dengan landasan ini, saya sudah bisa membangun situs alat eksklusif sendiri. Bayangkan semua jenis alat praktis dikumpulkan dalam situs web yang disesuaikan, dan Anda dapat menggunakannya dengan sekali klik kapan saja, di mana saja. Sungguh nyaman dan keren!

1

Skenario 2: Demonstrasi analisis laporan keuangan NVIDIA 2024

Di masa lalu, banyak keluaran laporan keuangan analisis AI berbentuk teks. Sekarang kami mencoba menggunakan grafik untuk menunjukkan efeknya.

Kata-kata cepat:

Bisakah Anda menganalisis informasinya? https://investor.nvidia.com/news/press-release-details/2024/NVIDIA-Announces-Financial-Results-for-Fourth-Quarter-and-Fiscal-2024/ dan mengubahnya menjadi Demo interaktif yang mudah dicerna untuk membantu saya memahaminya

Pratinjau Poe awalnya menggunakan demonstrasi interaktif sederhana untuk menunjukkan indikator keuangan utama NVIDIA. Dengan mengklik tombol yang berbeda, Anda dapat melihat grafik pendapatan, laba, dan laba per saham. Rasanya cukup kuat, tidak kalah dengan Artefak sama sekali.

Versi profesional yang dioptimalkan ada di sini. Tidak hanya membandingkan berbagai indikator, tetapi juga memberikan gambaran komprehensif tentang status keuangan NVIDIA, termasuk penyajian data dan analisis profesional. Efek keseluruhannya lumayan, lihat saja gambarnya.

Catatan percakapan: https://poe.com/s/NaFg8czE3NKSDu1vehH1

1

Skenario 3: Membuat kartu pengetahuan kimia

Saya ingat salah satu kasus aplikasi web yang dihasilkan oleh akun resmi Poe adalahKartu pengetahuanKartu flash:

https://poe.com/s/HDAXQjBX9qmsInjjgV4X, mengapa tidak menggunakan ini sebagai prototipe untuk membuat kartu pengetahuan kimia?

Pembuatan kartu juga sangat sederhana. Setelah beberapa iterasi dasar, efeknya akan keluar. Iterasi dan modifikasi utamanya adalah sebagai berikut:

• Informasi teks dasar:Kartu tersebut memiliki konsep di bagian depan dan penjelasan konsep di bagian belakang.

• Kata:Teks sebelum dan sesudahnya dibedakan berdasarkan ukuran, warna latar belakang, dll.

• nada:Nada warna keseluruhannya adalah warna Moran yang terlihat lebih nyaman.

Dialog efek kartu: https://poe.com/s/1TgDhUkoKmhjMq75yXhF

Teman-teman yang penuh perhatian dapat melihat bahwa selain membalik dan berinteraksi, saya juga menambahkanID Pengguna, waktu nyata,Meningkatkan keunikan dan sifat kartu secara real-time.

1

Adegan 4: Simulasi animasi siklus air

Hari ini kita akan bermimpi kembali ke masa SMA kita dan membuat proses animasi siklus air sehingga halaman tersebut dapat memutar efek animasi secara otomatis.

Kata-kata cepat:

Gunakan React untuk menganimasikan bagaimana air bersirkulasi. Untuk membuatnya lebih rumit, tambahkan emoji atau svg.

Saya memerlukan komponen React untuk proses loop air. Di sebelah kiri adalah animasi yang menunjukkan empat tahap penguapan, kondensasi, pengendapan, dan pengumpulan; di sebelah kanan adalah deskripsi teks yang sesuai. Silakan gunakan Web Speech API untuk menambahkan fungsi pemutaran ucapan otomatis, sehingga konten ucapan konsisten dengan teks. Dianimasikan menggunakan SVG, setiap tahap berdurasi 8 detik. Desain keseluruhan harus ringkas, jelas dan mudah dimengerti. Pastikan animasi lebih halus dan teks lebih ramping.Dan pratinjau tampilannya langsung di Pratinjau

Proses dialog: https://poe.com/s/OujTxBMnSknxHaqmBhXs

Tidak hanyaDemonstrasi otomatis animasi, di sebelahDeskripsi singkat tentang proses siklus air , sangat jelas dan berbeda. Ketika guru mengajarkan konsep yang kompleks, mereka dapat dengan mudah membuat presentasi sambil menyiapkan perangkat pelajaran, dengan cepat dan intuitif. Ini adalah artefak yang menghemat waktu dan tenaga untuk para guru!

1

Skenario 5: Bangun situs web alat dekompresi Anda sendiri

Saya menelusuri situs web tersebut dua hari yang lalu dan menemukan situs web yang menarik. Situs web ini adalah situs web yang menampilkan efek mouse gaya tahun 90-an. Ini menunjukkan serangkaian efek mouse yang diterapkan melalui JavaScript, yang dapat mengikuti gerakan mouse atau sentuhan jari Anda. Anda dapat mengklik di mana saja untuk mengganti efek yang berbeda, seperti efek pelangi, dll. Kemudian coba gunakan fungsi Pratinjau Poe.

Kata-kata cepat:

Buat artefak dekompresi, ini informasinya:

https://cursoreffects.com/

https://github.com/tholman/efek-kursor

Gaya sederhana pertama kali:

Gaya versi pertama terlalu sederhana, jadi saya meminta Claude 3.5 Sonnet untuk mempercantiknya.Tombol hijau dan latar belakang putih telah ditambahkan, dan efek mouse telah ditingkatkan dari 4 menjadi 11.。

Namun saat ini, saya menemukan bahwa "teks" dan "efek kursor" memenuhi seluruh layar, dan saya tidak dapat melihat dengan lebih baik efek klik mouse. Terus sesuaikan dan katakan pada Claude 3.5 Soneta:Kosongkan ruang tengah sambil terus mempercantik efek visual, ada 2 gaya efek berbeda berikut ini.

Kami akan menemukan warna yang digunakan versi inigradasi warna, sangat menyegarkan pada saat yang sama; posisi tengah juga dibebaskan, dan efek keseluruhannya cukup bagus.

efek gradien merah muda

efek gradien biru

Sebenarnya efek di atas cukup memuaskan, tapi saya ingin keseluruhan halamannya lebih ringkas. Jika kita perhatikan lebih dekat kita akan menemukan:

• Ada banyak teks di seluruh halaman, dan dua baris karakter kecil di tengahnya memiliki arti yang tumpang tindih, salah satunya dapat dihapus;

• Nama panggilan efek khusus kursor di bawah ini memakan terlalu banyak ruang dan menarik terlalu banyak perhatian. Ini dapat diubah menjadi tombol yang berubah saat pemain mengklik.

Saya kemudian melanjutkan memberi tahu Claude 3.5 Soneta agar ringkas dan jelas. Efek akhirnya adalah sebagai berikut.

Setelah optimasi akhir, font diganti dengan gaya yang lebih sesuai. Seluruh warna latar belakang diberi gradien acak, yang sangat menarik.

Alat dekompresi buatan sendiri: https://poe.com/s/xPxoi0qCl4JVsXw3GxqV

1

akhirnya

Entah itu Poe atau Claude, tampilan Pratinjau/Artefaknya bikin layarteks, kodemembayangkan,Langkah ini menjadi lebih sederhana dan mudah untuk diterapkan.

• Bagi pengembang, Artefak dapat menghasilkan dan memperbaiki kode, sehingga mengurangi waktu pengkodean manual;

• Untuk kolaborasi tim, kemampuan melihat, mengedit, dan membuat konten secara real time di platform yang sama sangat mengurangi hilangnya transmisi informasi.

• Untuk pendidik, gunakan Claude 3.5 Soneta untuk menghasilkan konten pengajaran dan presentasi guna menyederhanakan proses produksi. Siswa dapat lebih mudah mengakses sumber belajar dan menggunakan demonstrasi real-time untuk meningkatkan minat belajar.

Baik itu pengembang, kolaborasi tim, atau pendidik, efisiensi pekerjaan dan kehidupan sehari-hari telah meningkat pesat. Ada banyak pemandangan seperti ini dalam hidup...

Setelah saya selesai membuat alat dekompresi tersebut, saya langsung membagikan alat dekompresi buatan saya tersebut kepada teman programmer saya. Demikianlah perbincangan dengannya.

Dia berkata: "Butuh satu hari untuk menulis kode seperti ini," tapi saya hanya menghabiskan paling banyak setengah jam hari ini (PS: Kode Pemula) Bukankah ini awal dari sejenis AI yang memasuki rumah dari orang biasa?

Kami menantikan lebih banyak AI memasuki rumah masyarakat umum dan visi semua orang di masa depan.

Referensi:

1. Situs web resmi Poe: https://poe.com/

2. Pengenalan pembaruan Claude 3.5 Soneta:

   https://www.anthropic.com/berita/claude-3-5-soneta

3. Artefak dekompresi asli: https://cursoreffects.com/

4. Stasiun pengumpulan dan agregasi kasus Pameran Artefak Claude:

   https://claudeartifacts.com/?category=Semua

Referensi kasus aplikasi web Poe yang dibuat secara resmi:

1. Presentasi Interaktif: https://poe.com/s/NlX2WRElDUvtuuMSFrZq

2. Kartu Flash Kartu Pengetahuan: https://poe.com/s/HDAXQjBX9qmsInjjgV4X

3. Mesin drum elektronik Mesin Drum: https://poe.com/s/G4HshkCQCaXVfg0ndPZK

4. Collider Warna Besar: https://poe.com/s/neKbyqEJYUtiRjeC6b5f