Automatikkan ulasan kod menggunakan Kod VS dan Ollama

Ditulis oleh Carlos Mucuho✏️

Komen kod memainkan peranan penting dalam pembangunan perisian. Mereka:

• * Terangkan logik kompleks
  • Dokumen proses membuat keputusan
  • Sediakan konteks untuk pembangun masa hadapan

Walaupun sesetengah pihak berhujah bahawa kod yang ditulis dengan baik harus jelas, yang lain menekankan kepentingan ulasan dalam menangkap alasan di sebalik pelaksanaan tertentu. Idea mengautomasikan penjanaan komen telah mencetuskan perbincangan tentang sama ada AI benar-benar boleh menangkap cerapan manusia yang menjadikan komen berharga.

Pembantu pengekodan berkuasa AI seperti GitHub Copilot terus mendapat populariti, tetapi komuniti bergelut dengan soalan tentang privasi data dan risiko menjadi bergantung pada platform proprietari. Walaupun kebimbangan ini, alatan seperti Ollama menawarkan cara untuk mendapat manfaat daripada keupayaan AI sambil menangani kebimbangan tentang privasi data dan penguncian platform.

Ollama bukanlah pembantu pengekodan itu sendiri, sebaliknya alat yang membolehkan pembangun menjalankan model bahasa besar (LLM) untuk meningkatkan produktiviti tanpa berkongsi data anda atau membayar langganan yang mahal.

Dalam tutorial ini, anda akan belajar cara membuat sambungan Kod VS yang menggunakan Ollama untuk mengautomasikan penjanaan ulasan. Projek ini akan menunjukkan cara menggunakan model LLM untuk meningkatkan produktiviti tanpa berkongsi data anda atau membayar langganan yang mahal.

Menjelang akhir tutorial, anda akan mempunyai sambungan yang kelihatan serupa dengan yang berikut:

Untuk mengikuti, anda memerlukan:

• Node.js dan npm dipasang
• Mesin yang mampu menjalankan LLM menggunakan Ollama

Menyediakan Ollama

Untuk menyediakan Ollama, mulakan dengan memuat turun pemasang yang sesuai untuk sistem pengendalian anda daripada tapak web rasmi Ollama:

• Untuk memasang Ollama pada Windows, muat turun fail boleh laku dan jalankannya. Ollama akan dipasang secara automatik dan anda akan bersedia untuk menggunakannya
• Untuk Mac, selepas memuat turun Ollama untuk MacOS, nyahzip fail dan seret folder Ollama.app ke dalam folder Aplikasi anda. Pemasangan akan selesai sebaik sahaja anda mengalihkan apl

• Untuk pengguna Linux, memasang Ollama adalah semudah menjalankan arahan berikut dalam terminal anda:
  

  curl -fsSL https://ollama.com/install.sh | sh
  

Menarik dan menjalankan model

Setelah pemasangan Ollama selesai, anda boleh mula berinteraksi dengan LLM. Sebelum menjalankan sebarang arahan, anda perlu melancarkan Ollama dengan membuka apl atau menjalankan arahan berikut dalam terminal:

curl -fsSL https://ollama.com/install.sh | sh

Arahan ini memulakan apl Ollama, membolehkan anda menggunakan arahan yang tersedia. Ia juga memulakan pelayan Ollama berjalan pada port 11434. Anda boleh menyemak sama ada pelayan sedang berjalan dengan membuka tetingkap penyemak imbas baharu dan menavigasi ke http://localhost:11434/ Untuk menarik model daripada pendaftaran Ollama tanpa menjalankannya, gunakan arahan tarik ollama. Contohnya, untuk menarik model phi3.5, jalankan yang berikut:

ollama serve

Arahan ini mengambil model dan menjadikannya tersedia untuk kegunaan kemudian. Anda boleh menyenaraikan semua model yang telah ditarik menggunakan arahan berikut:

ollama pull phi3.5

Ini akan memaparkan senarai model bersama saiz dan masa pengubahsuaiannya:

ollama list

Untuk menarik dan melaksanakan model serta-merta, gunakan arahan ollama run. Contohnya, untuk menjalankan phi3.5, jalankan:

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

Arahan ini menarik model — jika ia belum ditarik lagi — dan memulakan pelaksanaan supaya anda boleh mula menanyakannya dengan segera. Anda sepatutnya melihat perkara berikut dalam terminal anda:

ollama run phi3.5

Dalam tutorial ini, anda akan menggunakan model phi3.5 untuk menjana ulasan bagi blok kod yang diberikan. Model bahasa ini dipilih untuk keseimbangan antara saiz dan prestasi — walaupun padat, ia memberikan hasil yang kukuh, menjadikannya ideal untuk membina aplikasi bukti konsep.

Model phi3.5 cukup ringan untuk dijalankan dengan cekap pada komputer dengan RAM terhad dan tiada GPU. Jika anda mempunyai GPU, jangan ragu untuk menjalankan LLM yang lebih besar. Hantar gesaan berikut kepada model:

csfm1993:~$ ollama run phi3.5
>>> Send a message (/? for help)

Gesaan meminta model phi3.5 untuk menerangkan perkara yang berlaku dalam blok kod tertentu. Anda sepatutnya mendapat jawapan yang serupa dengan yang berikut:

complete code:
"
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
  res.send('Hello World!')
})
app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})
"
Given the code block below, write a brief, insightful comment that explains its purpose and functionality within the script. If applicable, mention any inputs expected in the code block. 
Keep the comment concise (maximum 2 lines). Wrap the comment with the appropriate comment syntax (//). Avoid assumptions about the complete code and focus on the provided block. Don't rewrite the code block.
code block:
"
app.get('/', (req, res) => {
  res.send('Hello World!')
})
"

Model mengembalikan ulasan dengan sintaks ulasan yang ditentukan diikuti dengan penjelasan. Setelah anda selesai berinteraksi dengan model, hantar arahan /bye untuk menamatkan sembang.

Mencipta dan mengkonfigurasi projek

Dalam bahagian ini, anda akan membuat projek sambungan Kod VS baharu dan memasang modul yang diperlukan untuk berinteraksi dengan Ollama. Anda akan menggunakan Yeoman dan VS Code Extension Generator untuk merancah projek TypeScript.

Dalam terminal anda, jalankan arahan berikut untuk mencipta projek sambungan Kod VS baharu:

// This Express.js route handler responds to GET requests at the root URL 
('/'), sending back a plain text 'Hello World!' message as an HTTP 
response. No additional inputs are required for this specific block of 
code, which serves as a basic setup example within a web server context.

Pilih TypeScript sebagai bahasa yang digunakan untuk projek, dan kemudian isi medan yang tinggal:

npx --package yo --package generator-code -- yo code

Sekarang, jalankan arahan berikut untuk memasang modul yang diperlukan untuk berinteraksi dengan pelayan Ollama:

? What type of extension do you want to create? New Extension (TypeScript)
? What's the name of your extension? commentGenerator
? What's the identifier of your extension? commentgenerator
? What's the description of your extension? Leave blank
? Initialize a git repository? Yes
? Which bundler to use? unbundled
? Which package manager to use? npm
? Do you want to open the new folder with Visual Studio Code? Open with `code`

Dengan arahan di atas, anda memasang pakej berikut:

• ollama: Pakej yang menyediakan set alatan dan utiliti untuk berinteraksi dengan LLM. Ia akan digunakan untuk berkomunikasi dengan pelayan Ollama, menghantar gesaan kepada LLM untuk menjana komen kod bagi blok kod yang diberikan
• cross-fetch: Pakej ringan yang membawa sokongan Fetch API ke Node.js. Ia mendayakan pengambilan sumber, seperti permintaan API, dalam persekitaran yang Fetch tidak tersedia secara asli. Ia akan digunakan untuk membuat permintaan HTTP kepada pelayan Ollama dan mengelakkan ralat tamat masa permintaan HTTP yang mungkin berlaku apabila LLM mengambil masa terlalu lama untuk menjana respons

Buka fail package.json dan pastikan versi vscode dalam sifat enjin sepadan dengan versi Kod VS yang dipasang dalam sistem anda:

curl -fsSL https://ollama.com/install.sh | sh

Dalam fail package.json, perhatikan bagaimana titik masuk utama sambungan anda ialah fail bernama fail extension.js, terletak dalam direktori keluar, walaupun ini ialah projek TypeScript. Ini kerana kod TypeScript disusun kepada JavaScript dengan melaksanakan arahan kompilasi npm sebelum menjalankan projek:

ollama serve

Selain itu, perhatikan cara arahan yang perlu dijalankan sambungan anda diisytiharkan dalam sifat perintah:

ollama pull phi3.5

Pada masa ini, hanya terdapat satu perintah yang diisytiharkan bernama Hello World dengan ID commentgenerator.helloWorld. Ini ialah arahan lalai yang disertakan dengan projek berscaffold.

Seterusnya, navigasi ke direktori src dan buka fail extension.ts:

ollama list

Fail extension.ts ialah titik masuk untuk sambungan Kod VS. Kod di dalam fail ini mula-mula mengimport modul vscode dan mengisytiharkan dua fungsi bernama aktifkan dan nyahaktifkan.

Fungsi aktifkan akan dipanggil apabila sambungan diaktifkan. Fungsi ini mencatatkan mesej dan mendaftarkan arahan Hello World, yang ditakrifkan dalam fail package.json. Setiap kali arahan ini dilaksanakan, tetingkap pemberitahuan yang menunjukkan mesej "Hello World" akan dipaparkan.

Fungsi nyahaktif dipanggil apabila sambungan dinyahaktifkan (contohnya, apabila Kod VS ditutup). Ia kosong pada masa ini kerana tiada pembersihan diperlukan, tetapi ia boleh digunakan untuk mengeluarkan sumber.

Di dalam editor, buka src/extension.ts dan tekan F5 atau jalankan arahan Nyahpepijat: Mula Menyahpepijat daripada Palet Perintah (Ctrl Shift P). Ini akan menyusun dan menjalankan sambungan dalam tetingkap Hos Pembangunan Sambungan baharu.

Jalankan arahan Hello World daripada Command Palette (Ctrl Shift P) dalam tetingkap baharu.

Dalam editor, navigasi ke src/extension.ts dan sama ada tekan F5 atau gunakan pilihan "Nyahpepijat: Mula Menyahpepijat" daripada Palet Perintah (Ctrl Shift P). Tindakan ini akan menyusun sambungan dan melancarkannya dalam tetingkap Hos Pembangunan Sambungan yang berasingan.

Dalam tetingkap baharu ini, buka Command Palette (Ctrl Shift P) dan laksanakan arahan Hello World:

Untuk terus memantau projek anda untuk perubahan dan menyusunnya secara automatik, kembali ke terminal anda dan jalankan arahan berikut:

curl -fsSL https://ollama.com/install.sh | sh

Ini akan memulakan pengkompil TypeScript dalam mod tontonan, memastikan projek anda disusun semula apabila anda membuat perubahan.

Mendaftarkan arahan Generate Comment

Dalam bahagian ini, anda akan menggantikan arahan Hello World lalai dengan arahan bernama Generate Comment. Perintah ini akan dicetuskan apabila — anda menekanya — pengguna ingin menjana ulasan. Anda akan menentukan arahan dan memastikan ia didaftarkan dengan betul dalam sambungan.

Buka fail package.json dan gantikan arahan Hello World seperti yang ditunjukkan di bawah:

ollama serve

Buka fail bernama extension.ts dan gantikan kod di dalam fungsi aktifkan dengan yang berikut:

ollama pull phi3.5

Kod ini menggantikan Perintah Hello dengan arahan Generate Comment dengan ID commentgenerator.generateComment. Perintah Generate Comment juga memaparkan mesej maklumat apabila dicetuskan.

Arahan itu kemudiannya ditolak ke tatasusunan context.subscriptions untuk memastikan ia dilupuskan dengan betul apabila sambungan dinyahaktifkan atau apabila ia tidak diperlukan lagi.

Tekan F5 atau jalankan Nyahpepijat: Mulakan arahan Nyahpepijat daripada Palet Perintah (Ctrl Shift P). Ini akan menjalankan sambungan dalam tetingkap Hos Pembangunan Sambungan baharu.

Jalankan arahan Generate Comment daripada Command Palette (Ctrl Shift P) dalam tetingkap baharu:

Membina gesaan

Dalam bahagian ini, anda akan membina gesaan yang akan dihantar ke pelayan Ollama. Gesaan akan mengandungi blok kod dan konteksnya, serta arahan untuk LLM. Langkah ini penting untuk membimbing LLM menjana komen yang bermakna berdasarkan kod yang disediakan.

Untuk menjana ulasan bagi blok kod tertentu, pengguna perlu menyalin blok itu ke papan keratan terlebih dahulu, letakkan kursor pada baris tempat ulasan itu sepatutnya dipaparkan, dan kemudian mencetuskan perintah Jana Komen. Keseluruhan kod daripada fail yang mengandungi blok itu akan berfungsi sebagai konteks untuk gesaan.

Buat fail bernama promptBuilder.ts dalam direktori src dan tambahkan kod berikut padanya:

ollama list

Kod ini mentakrifkan tiga fungsi: getScriptContext, getCodeBlock dan getCodeBlock.

• getScriptContext menerima editor teks semasa sebagai hujah dan mengembalikan keseluruhan teks fail yang sedang difokuskan, menyediakan konteks kod yang berkaitan
• getCodeBlock membaca teks daripada papan keratan dan mengembalikannya sebagai blok kod
• selectCommentSyntax mengambil editor teks semasa sebagai hujah dan mengembalikan sintaks ulasan yang sesuai untuk sambungan fail. Sila ambil perhatian bahawa, dalam fungsi ini, anda hanya boleh mengendalikan sintaks komen JavaScript dan Python; untuk mengendalikan lebih banyak bahasa, anda perlu mengubah suai fungsi

Sekarang, mari kita bina gesaan menggunakan konteks kod, blok kod dan sintaks ulasan. Tambahkan kod berikut pada fail promptBuilder.ts:

curl -fsSL https://ollama.com/install.sh | sh

Kod ini mentakrifkan fungsi bernama buildPrompt, yang mengambil editor teks semasa sebagai hujah dan mengembalikan rentetan gesaan.

Ia mula-mula mendapatkan semula blok kod, konteks kod dan sintaks ulasan menggunakan fungsi yang ditakrifkan sebelum ini. Kemudian, ia membina rentetan segera menggunakan literal templat dan menggantikan ruang letak dengan nilai sebenar.

Rentetan gesaan mengarahkan LLM untuk menulis ulasan ringkas dan bernas yang menerangkan tujuan dan kefungsian blok kod dalam skrip, memastikan ia ringkas (maksimum dua baris) dan dibalut dengan sintaks ulasan yang betul. LLM diarahkan untuk memberi tumpuan semata-mata pada blok yang disediakan, memastikan ulasan adalah relevan dan tepat.

Sekarang, mari kemas kini fail extension.ts untuk menggunakan fungsi buildPrompt. Pergi ke blok import fail extension.ts dan import fungsi buildPrompt:

ollama serve

Seterusnya, kemas kini generateCommentCommand dengan kod berikut:

ollama pull phi3.5

Kod ini mengemas kini generateCommentCommand untuk mendapatkan semula editor teks aktif dan membina gesaan menggunakan fungsi buildPrompt. Ia kemudian log gesaan dan memaparkan mesej ralat jika gesaan tidak dapat dijana.

Tekan F5 atau jalankan Nyahpepijat: Mulakan arahan Nyahpepijat daripada Palet Perintah (Ctrl Shift P). Ini akan menjalankan sambungan dalam tetingkap Hos Pembangunan Sambungan baharu.

Jalankan arahan Jana Komen daripada Palet Perintah (Ctrl Shift P) dalam tetingkap baharu.

Kembali ke tetingkap asal di mana anda mempunyai kod sambungan, buka terminal bersepadu, klik Konsol Nyahpepijat dan cari gesaan yang dijana:

Menggunakan Ollama.js untuk menjana ulasan

Dalam bahagian ini, anda akan menggunakan perpustakaan Ollama.js untuk menjana ulasan daripada gesaan. Anda akan menyediakan fungsi yang diperlukan untuk berkomunikasi dengan pelayan Ollama, menghantar gesaan kepada pelayan, berinteraksi dengan LLM dan menerima komen yang dijana.

Buat fail bernama ollama.ts dalam direktori src dan tambah kod berikut:

curl -fsSL https://ollama.com/install.sh | sh

Kod ini mengimport kelas Ollama daripada modul ollama dan fungsi ambil daripada modul ambil silang. Ia kemudian mencipta contoh baharu kelas Ollama dengan hos dan fungsi ambil yang ditentukan.

Di sini anda menggunakan modul ambil silang untuk mencipta tika Ollama untuk mengelakkan ralat tamat masa yang mungkin dilemparkan oleh pelayan Ollama apabila LLM mengambil masa terlalu lama untuk menjana respons.

Sekarang, mari kita takrifkan fungsi generateComment, yang mengambil gesaan sebagai hujah dan mengembalikan ulasan yang dijana. Tambahkan kod berikut pada fail ollama.ts:

ollama serve

Kod ini mentakrifkan fungsi generateComment, yang mengambil gesaan sebagai hujah dan mengembalikan ulasan yang dijana.

Ia mula-mula merekodkan masa mula menggunakan fungsi performance.now. Kemudian, ia menghantar permintaan kepada pelayan Ollama menggunakan kaedah jana contoh ollama, menghantar phi3.5 sebagai nama model dan gesaan.

Seterusnya, ia merekodkan masa tamat dan mencatat masa yang diambil oleh LLM untuk menjana respons.

Akhir sekali, ia mengembalikan ulasan yang dijana yang disimpan dalam respons.

Sekarang, mari kemas kini fail extension.ts untuk menggunakan fungsi generateComment. Mula-mula, pergi ke blok import fail extension.ts dan import fungsi generateComment:

ollama pull phi3.5

Seterusnya, kemas kini kod di dalam generateCommentCommand:

ollama list

Kod ini mengemas kini generateCommentCommand untuk menjana ulasan menggunakan fungsi generateComment. Ia kemudian merekodkan ulasan yang dijana dan memaparkan mesej ralat jika ulasan itu tidak dapat dijana.

Tekan F5 atau jalankan Nyahpepijat: Mulakan arahan Nyahpepijat daripada Palet Perintah (Ctrl Shift P). Ini akan menyusun dan menjalankan sambungan dalam tetingkap Hos Pembangunan Sambungan baharu.

Buka fail yang anda ingin jana ulasan, navigasi ke blok kod yang diingini, salinnya dan letakkan kursor dalam baris yang anda mahu komen itu ditambahkan. Seterusnya, jalankan arahan Generate Comment daripada Command Palette (Ctrl Shift P) dalam tetingkap baharu.

Kembali ke tetingkap asal di mana anda mempunyai kod sambungan, buka terminal bersepadu, klik Konsol Nyahpepijat dan cari ulasan yang dijana:

Perlu diingat bahawa masa yang diperlukan untuk LLM menjana respons mungkin berbeza-beza bergantung pada perkakasan anda.

Menambah komen pada skrip

Dalam bahagian ini, anda akan menambah ulasan yang dijana pada skrip pada baris di mana pengguna menggunakan arahan Generate Comment. Langkah ini melibatkan pengurusan editor untuk memasukkan ulasan di lokasi yang sesuai dalam kod.

Dalam direktori src, buat fail bernama manageEditor.ts dan tambah kod berikut:

curl -fsSL https://ollama.com/install.sh | sh

Kod ini mula-mula mengimport keseluruhan API Kod Visual Studio ke dalam modul semasa dan kemudian mentakrifkan dua fungsi bernama getCurrentLine dan addCommentToFile.

Fungsi getCurrentLine mengambil editor teks semasa sebagai hujah dan mengembalikan nombor baris semasa.

Fungsi addCommentToFile mengambil URI fail, nama fail, nombor baris dan komen yang dijana sebagai argumen dan menambah ulasan pada fail pada baris yang ditentukan. Ia mula-mula mencipta objek WorkspaceEdit baharu dan memasukkan ulasan pada kedudukan yang ditentukan. Ia kemudian menggunakan pengeditan dan memaparkan mesej maklumat.

Sekarang, mari kemas kini fail extension.ts untuk menggunakan fungsi addCommentToFile.

Pergi ke blok import fail extension.ts dan import fungsi getCurrentLine dan addCommentToFile:

ollama serve

Seterusnya, kemas kini kod di dalam generateCommentCommand:

ollama pull phi3.5

Kod ini mengemas kini generateCommentCommand untuk mendapatkan semula URI fail, nama fail dan nombor baris semasa menggunakan fungsi getCurrentLine. Ia kemudian menambah ulasan pada fail pada baris semasa menggunakan fungsi addCommentToFile.

Tekan F5 atau jalankan Nyahpepijat: Mulakan arahan Nyahpepijat daripada Palet Perintah (Ctrl Shift P). Ini akan menjalankan sambungan dalam tetingkap Hos Pembangunan Sambungan baharu.

Buka fail yang anda ingin jana ulasan, navigasi ke blok kod yang diingini, salinnya dan letakkan kursor dalam baris yang anda mahu komen itu ditambahkan.

Seterusnya, jalankan arahan Generate Comment daripada Command Palette (Ctrl Shift P) dan selepas beberapa saat (atau minit, bergantung pada perkakasan anda), komen akan diletakkan pada baris yang ditentukan (anda boleh menekan Alt Z untuk membalut baris komen jika terlalu panjang):

Kesimpulan

Dunia pembangunan perisian dipenuhi dengan perbincangan tentang menggunakan AI untuk membantu dalam tugas pengekodan, termasuk menjana komen kod.

Dalam tutorial ini, kami telah membina sambungan Kod VS untuk mengautomasikan ulasan kod menggunakan perpustakaan Ollama.js dan LLM tempatan. Kami menunjukkan cara beberapa alat pengekodan AI boleh menyelaraskan proses dokumentasi anda tanpa menjejaskan privasi data atau memerlukan langganan berbayar.

---

Sediakan dengan penjejakan ralat moden LogRocket dalam beberapa minit:

1. Lawati https://logrocket.com/signup/ untuk mendapatkan ID apl.
2. Pasang LogRocket melalui NPM atau tag skrip. LogRocket.init() mesti dipanggil bahagian klien, bukan bahagian pelayan.

NPM:

ollama list

Tag Skrip:

NAME                 ID                  SIZE          MODIFIED     
phi3.5:latest        61819fb370a3        2.2 GB        11 days ago         
llava:latest         8dd30f6b0cb1        4.7 GB        2 weeks ago         
phi3:latest          64c1188f2485        2.4 GB        3 months ago        
csfm1993:~$ 

3.(Pilihan) Pasang pemalam untuk penyepaduan yang lebih mendalam dengan timbunan anda:

• Perisian tengah Redux
• ngrx middleware
• Pemalam Vuex

Mulakan sekarang

Atas ialah kandungan terperinci Automatikkan ulasan kod menggunakan Kod VS dan Ollama. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!