Penulis : (1) Vivian Liu, Universitas Columbia (vivian@cs.columbia.edu) (2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com); (3) Li-Yi Wei, Adobe Research (lwei@adobe.com) (4) Matthew Fisher, Adobe Research (matfishe@adobe.com) (5) Timothy Langlois, Penelitian Adobe (tlangloi@adobe.com); (6) Seth Walker, Adobe Research (swalker@adobe.com) (7) Lydia Chilton, Universitas Columbia (chilton@cs.columbia.edu). Authors: (1) Vivian Liu, Universitas Columbia (vivian@cs.columbia.edu) (2) Rubaiat Habib Kazi, Adobe Research (rhabib@adobe.com); (3) Li-Yi Wei, Adobe Research (lwei@adobe.com) (4) Matthew Fisher, Adobe Research (matfishe@adobe.com) (5) Timothy Langlois, Penelitian Adobe (tlangloi@adobe.com); (6) Seth Walker, Adobe Research (swalker@adobe.com) (7) Lydia Chilton, Universitas Columbia (chilton@cs.columbia.edu). Tabel dari kiri Abstrak dan 1 Introduksi 2 Pekerjaan terkait 2.1 Sintesis program 2.2 Kreativitas Dukungan Alat untuk Animasi 2.3 Alat Generatif untuk Desain 3 Langkah Formatif 4 Logomotion System dan 4.1 Input 4.2 Informasi visual preprocess 4.3 Sintesis kode yang didasarkan visual 5 Evaluasi 5.1 Evaluasi: Perbaikan Program 5.2 Metodologi 5.3 Temuan 6 Evaluasi dengan Novices 7 Diskusi dan 7.1 Menjauh dari Template 7.2 Menghasilkan kode di sekitar visual 7.3 Pembatasan 8 Kesimpulan dan Referensi abstrak Logo animasi adalah cara yang menarik dan universal bagi individu dan merek untuk mewakili diri mereka secara online. Menulis logo ini secara manual dapat membutuhkan keterampilan dan usaha artistik yang signifikan. Untuk membantu desainer pemula menganimasikan logo, alat desain saat ini menawarkan templat dan preset animasi. Namun, solusi ini dapat dibatasi dalam jangkauan ekspresif mereka. Model bahasa besar memiliki potensi untuk membantu desainer pemula membuat logo animasi dengan menghasilkan kode animasi yang disesuaikan dengan konten mereka. Dalam makalah ini, kami memperkenalkan LogoMotion, sebuah sistem berbasis LLM yang mengambil dokumen berlapis dan menghasilkan logo animasi melalui sintesis program yang didasarkan secara visual. Kami memperkenalkan teknik untuk membuat representasi HTML dari sebuah kanvas, identifikasi primer dan elemen sekunder, mensintesis kode animasi, dan secara visual memecahkan kesalahan animasi. Ketika dibandingkan dengan alat standar industri, 1 Pengantar Animasi adalah bentuk desain khusus yang telah kita ciptakan untuk membantu kita mengambil desain statis ke dalam konteks yang lebih kaya media dan interaktif. Jenis konten animasi tertentu yang sering kita ciptakan adalah logo animasi. Animasi memungkinkan logo, yang telah didefinisikan sebagai “kepala visual” merek [25], untuk lebih baik terintegrasi dalam video, live stream, situs web, dan media sosial. animasi yang dijalankan dengan baik dapat dengan cepat menarik audiens, memperkenalkan merek atau individu secara online, dan meningkatkan konten untuk memiliki lebih banyak minat visual. Penulisan logo animasi adalah tantangan. Logo seringkali lebih dari sekadar sepasang ikon dengan teks. Karena mereka dapat memiliki tata letak, lapisan, warna, dan tipografi yang berbeda, mereka dapat mengambil variasi besar dan menjadi artefak yang kompleks untuk animasi. Untuk desainer pemula, bisa sulit untuk memahami elemen desain mana yang harus dianimasi, dalam urutan apa, dan bagaimana membangun gerakan yang menarik dan dapat dipercaya. Ada banyak aspek gerakan untuk dipertimbangkan seperti kecepatan, waktu, posisi, durasi, relief, dan kepribadian gerakan (misalnya, bounce yang lucu vs. entri yang kuat). Selain itu, ketika logo memiliki lebih banyak elemen desain, desainer juga harus memahami bagaimana kelompok elemen dapat sinkronisasi untuk mengkoordinasikan gerakan dan mengoreksi aliran visual. Meskipun ada permintaan besar untuk konten animasi, sulit bagi orang-orang di luar desain gerakan untuk mengembangkan jenis keahlian ini. Alat desain seperti Adobe Express, Canva, dan Figma sering memberikan solusi dalam bentuk template animasi dan teknik animasi otomatis [10, 12, 13]. Template mempopulerkan tata letak logo dengan animasi yang dapat disesuaikan oleh pengguna. Mereka menggambarkan bagaimana pengguna dapat menerapkan preset gerakan (misalnya slide, flicker, atau fade) pada elemen logo untuk membuat animasi yang profesional. Namun, template tidak selalu menyesuaikan diri dengan setiap kasus penggunaan. Ketika pengguna membuat editing (misalnya, menambahkan / menghapus / mengganti elemen logo) untuk menyesuaikan template logo, mereka dapat dengan mudah memecahkan konten yang rapi dan melihat profesional template yang awalnya dikemas dengan. Alternatif untuk template adalah teknik animasi otomatis, yang Model bahasa besar (LLM) menyajikan potensi untuk animasi contentaware. Mereka dapat menghasilkan kode animasi yang spesifik untuk elemen desain dan tata letak mereka di kanvas. Kode adalah representasi teks yang sering digunakan untuk mendorong animasi [18, 33, 53], karena dapat secara ringkas menentukan bagaimana elemen berinteraksi seiring waktu dan ruang di kanvas. Karena LLM mengkodekan sejumlah besar pengetahuan dunia, mereka dapat mengambil tindakan dan kegiatan yang terkait dengan konten yang dianimasi dan menghasilkan hampir jumlah animasi yang tak terbatas. Kapasitas generatif ujung terbuka ini dapat melampaui lingkup apa yang template, presets, dan teknik berbasis aturan biasanya mencakup. Perkembangan terbaru telah membuat LLM lebih multimodal, sehingga mereka dapat mengambil baik teks dan gambar sebagai input, dan memberikan tanggapan yang didasarkan secara visual. Ini membuat LLM lebih berlaku dalam domain seperti animasi di mana pemahaman visual tentang canvas penting. Ini membuka potensi bagi pengguna untuk memberikan gambar tata letak mereka ke LLM dan menerima animasi yang disesuaikan dengan tata letak dan elemen desain mereka. Sebagai contoh, jika seorang desainer pemula ingin menganimasikan taksi, mereka dapat menggunakan LLM untuk menghasilkan kode untuk mengemudi taksi ke canvas. Kode ini dapat menerjemahkan objek taksi di sepanjang x-aksis sebelum meringankan ke tengah canvas untuk menyiratkan stop-and-go gerakan yang sesuai dengan taksi. Dalam makalah ini, kami menyajikan LogoMotion, metode berbasis LLM yang secara otomatis memanipulasi tata letak statis dengan cara yang sadar konten. LogoMotion menghasilkan kode dalam pendekatan dua tahap yang melibatkan sintesis program berbasis visual dan perbaikan program. Tahap pertama memperkenalkan operator LLM multimodal yang mengambil dalam konteks visual dan 1) konstruksi representasi teks linenya, 2) grup konseptual elemen, dan 3) implementasi kode animasi. Tahap kedua dari pendekatan kami memperkenalkan teknik untuk perbaikan program berbasis visual, yang membantu LLM memeriksa apa yang telah mereka hasilkan terhadap tata letak asli dan perbedaan debug dalam mode layer-wise yang ditargetkan. Kontribusi kami adalah sebagai berikut: • LogoMotion, sistem LLM yang menggunakan generasi kode berbasis visual untuk secara otomatis menghasilkan animasi logo dari PDF. Sistem ini mengidentifikasi konten visual di setiap lapisan, mengarahkan elemen primer dan sekunder, dan menciptakan kelompok elemen. Berdasarkan ini, sistem menyarankan konsep desain (dalam teks) dan menggunakan LLM untuk menghasilkan kode animasi. • Perbaikan program berbasis visual, mekanisme yang memungkinkan LLM secara otomatis mendeteksi dan memecahkan kesalahan visual dalam kode animasi yang dihasilkan, menciptakan loop umpan balik antara kode yang dihasilkan LLM dan output visualnya. • Evaluasi teknis dari 276 animasi yang menunjukkan bahwa dibandingkan dengan Canva Magic Animate dan versi ablated dari sistem (tanpa tahap untuk analisis hierarki dan saran konsep desain), pipa penuh LogoMotion menghasilkan animasi yang lebih sadar konten. • Penilaian kualitatif pengguna pemula yang menunjukkan bahwa LogoMotion dapat dengan cepat mencapai animasi yang diinginkan dengan minimal reprompting. Dokumen ini tersedia di archiv di bawah lisensi CC BY-NC-ND 4.0 DEED. Dokumen ini tersedia di archiv di bawah lisensi CC BY-NC-ND 4.0 DEED. Tersedia di Arsip [1] Dalam video : https://youtu.be/Jo9opkMH7iY [2] Halaman dari proyek: https://vivian-liu.com/#/logomotion