Malaysian Llama-3.2 3B-Instruct
Continue finetuning https://huggingface.co/meta-llama/Llama-3.2-3B on highly curated 1.2B tokens Malaysian instruction.
Improvement
- 128k context length.
- Support respond in Mandarin, Tamil, Jawi, Manglish, Johor, Kedah, Kelantan, Pahang, Perak, Sabah, Sarawak, Selangor, Negeri Sembilan and Terengganu.
- Able to code in Mandarin, Tamil, Jawi, Manglish, Johor, Kedah, Kelantan, Pahang, Perak, Sabah, Sarawak, Selangor, Negeri Sembilan and Terengganu.
- Multi-turn Malaysian context such as related to Malaysian Legislation, politics, religions and languages.
- Standard RAG.
MalayMMLU
Model Accuracy shot by_letter category
0 Llama-3.2-3B-Malaysian-Reasoning 57.347524 0shot True STEM
1 Llama-3.2-3B-Malaysian-Reasoning 59.653308 0shot True Language
2 Llama-3.2-3B-Malaysian-Reasoning 57.690084 0shot True Social science
3 Llama-3.2-3B-Malaysian-Reasoning 57.639722 0shot True Others
4 Llama-3.2-3B-Malaysian-Reasoning 60.045506 0shot True Humanities
{'Social science': 6918, 'Language': 6288, 'Humanities': 4395, 'Others': 4169, 'STEM': 2443}
Model : Llama-3.2-3B-Malaysian-Reasoning
Metric : first
Shot : 0shot
average accuracy 58.58423161111799
accuracy for STEM 57.34752353663528
accuracy for Language 59.65330788804071
accuracy for Social science 57.6900838392599
accuracy for Others 57.639721755816744
accuracy for Humanities 60.04550625711035
Training session
Finetune on mesolitica/Malaysian-SFT to make the model understand Malaysian context.
How we train
- LoRA on
["q_proj", "k_proj", "v_proj", "o_proj", "gate_proj", "up_proj", "down_proj", "embed_tokens", "lm_head"]. - 256 Rank with alpha 512, or alpha of 2.0
- Multipacking with proper SDPA causal masking to prevent document contamination and also make sure proper position ids.
- Forked CCE loss for LoRA
lm_headto reduce memory consumption.
Source code at https://github.com/mesolitica/malaya/tree/master/session/small-malaysian-reasoning
Example
Load the model,
from transformers import AutoTokenizer, AutoModelForCausalLM, TextStreamer
import torch
tokenizer = AutoTokenizer.from_pretrained('malaysia-ai/Malaysian-Llama-3.2-3B-Instruct')
streamer = TextStreamer(tokenizer)
model = AutoModelForCausalLM.from_pretrained(
'malaysia-ai/Malaysian-Llama-3.2-3B-Instruct', torch_dtype = torch.bfloat16
).cuda()
- All examples are using stochastic sampling method, might not able to reproduce the same results on different machines.
- Some examples might been truncated, too long for this README.
General QA
Malay
d = [
{'role': 'user', 'content': 'camne nk selesaikan masalah hutang negara'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
camne nk selesaikan masalah hutang negara<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Untuk menyelesaikan isu hutang negara, terdapat beberapa langkah yang boleh diambil oleh kerajaan dan rakyat. Di sini kami akan membincangkan dua pendekatan utama iaitu pengurangan perbelanjaan awam dan peningkatan hasil.
Pertama sekali, mengenai pengurangan perbelanjaan awam. Ini bermakna kerajaan perlu mengurangkan belanjawan mereka dengan cara untuk tidak meningkatkan lagi jumlah hutang negara. Dalam hal ini, pemerintah perlu memotivasikan semula projek-projek pembangunan yang tidak diperlukan atau yang dapat dilaksanakan secara lain, seperti melalui usaha swasta. Selain itu, mereka juga harus berhati-hati dalam pelaburan dan penggunaan wang awam supaya ia tidak digunakan untuk tujuan yang tidak bertujuan langsung.
Kedua, dari sudut peningkatan hasil. Kerajaan perlu mencari sumber pendapatan tambahan tanpa menjejaskan pertumbuhan ekonomi. Salah satu cara adalah melalui pelbagai inisiatif fiskal seperti pemotongan cukai kepada golongan berpendapatan rendah, atau mungkin menambah caj tertentu ke atas barangan tertentu seperti minyak sawit atau petrol.
Selain itu, kerajaan juga boleh meningkatkan pendapatan daripada sektor swasta melalui pelaburan asing atau peluang perdagangan antarabangsa. Mereka juga boleh meningkatkan kawalan fiskal dengan lebih teliti terhadap perbelanjaan dan pengeluaran.
Secara keseluruhan, menyelesaikan masalah hutang negara memerlukan usaha bersama antara kerajaan dan rakyat. Rakyat perlu menyokong dasar-dasar kerajaan yang bertujuan untuk mengurangkan perbelanjaan dan meningkatkan pendapatan, serta menggalakkan amalan pengurusan kewangan yang bijak.<|eot_id|>
Jawi
d = [
{'role': 'user', 'content': 'camne nk selesaikan masalah hutang negara, reply in jawi'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
camne nk selesaikan masalah hutang negara, reply in jawi<|eot_id|><|start_header_id|>assistant<|end_header_id|>
مناڠني هوتڠ نڬارا اداله ايسو كومڤليك س يڠ ممرلوكن ڤندكتن ڤلباڬاي اسڤيك. برايكوت اياله ببراڤ چادڠن يڠ موڠكين:
١. منيڠكتكن حاصيل كراجأن: ساله ساتو چارا ترباءيق اونتوق مڠوروسكن هوتڠ نڬارا اداله دڠن منيڠكتكن حاصيل كراجأن. اين بوليه دچاڤاي ملالوءي ڤلباڬاي چارا، سڤرتي ملقساناكن ڤمبهارون چوكاي، ممڤروموسيكن اكتيۏيتي ايكونومي دان موجودكن ڤرسكيترن مسرا ڤرنياڬان.
٢. مڠورڠكن ڤربلنجأن كراجأن: كراجأن جوڬ بوليه مڠورڠكن ڤربلنجأنڽ دڠن لبيه بركسن. اين بوليه دلاكوكن دڠن مڠوتاماكن ڤربلنجأن ڤنتيڠ، سڤرتي ڤنديديقن دان ڤنجاڬان كصيحتن، دان مڠلق درڤد ڤربلنجأن برلبيهن. كراجأن جوڬ بوليه منداڤتكن توجوان مودال يڠ لبيه باڽق دالم ڤروجيك عوام، سڤرتي اينفراستروكتور دان ڤرتاهنن نڬارا.
٣. منيڠكتكن ڤرساايڠن: ڤرساايڠن بوليه ممبنتو مڠورڠكن هرڬ بارڠن دان ڤرخدمتن، يڠ بوليه منجادي سومبر ڤنداڤتن ڤنتيڠ اونتوق كراجأن. دڠن ممڤروموسيكن ڤرسكيترن ڤرنياڬان يڠ لبيه كومڤتيتيف، كراجأن بوليه مناريق لبيه باڽق شريكت بهارو دان مڠڬالقكن ڤرتومبوهن.
٤. منيڠكتكن ڤرودوقتيۏيتي: منيڠكتكن ڤرودوقتيۏيتي بوليه ممبنتو منيڠكتكن ڤرودوقتيۏيتي ايكونومي، يڠ ستروسڽ بوليه مڽومبڠ كڤد ڤرتومبوهن ايكونومي دان ڤنجانن حاصيل. كراجأن بوليه منچاڤأي اين ملالوءي ڤلباڬاي چارا، ترماسوق ملابور دالم ڤنديديقن، لاتيهن كماهيرن دان اينفراستروكتور.
٥. ممڤركوكوه تدبير اوروس: اخيرڽ، ممڤركوكوه تدبير اوروس بوليه ممبنتو ممستيكن دانا عوام داوروسكن دڠن بركسن دان چكڤ. اين بوليه دچاڤاي دڠن ملقساناكن عمالن ترباءيق دالم ڤڠوروسن كواڠن، منيڠكتكن كتلوسن دان اكاءونتابيليتي، دان ممستيكن ڤروسيس ڤروليهن تلوس دان عاديل.
سچارا كسلوروهنڽ، مناڠني هوتڠ نڬارا ممرلوكن ڤندكتن ڤلباڬاي روڤا يڠ مليبتكن بوكن سهاج كراجأن تتاڤي جوڬ مشاركت سيۏيل، سيكتور سواستا دان راكن كوڠسي انتارابڠسا. دڠن بكرجاسام، اداله موڠكين اونتوق ممباڠونكن ڤندكتن يڠ بركس
Sabahan
d = [
{'role': 'user', 'content': 'camne nk selesaikan masalah hutang negara, reply in sabah'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
camne nk selesaikan masalah hutang negara, reply in sabah<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Bah, kunuk sia mau bilang sikit pasal masalah hutang negara kita ni. Palui betul la keadaan ni, tapi ada juga cara-cara boleh bikin untuk selesai. Tingu saja la:
1. Kasi tingu baik-baik duit kerajaan: Kerajaan mesti pandai-pandai urus duit rakyat. Jangan main santut ja, kena jaga macam bank punya.
2. Bikin lagi banyak barang sama perkhidmatan: Kalau bikin lebih banyak benda yang orang mau beli, ekonomi pun boleh naik. Macam jual rumah ka, bas ka.
3. Tarok cukai: Ndak payah la tambirang, kena ubah sikit-sikit cukai tu. Kurangkan untuk orang biasa, naikkan untuk orang kaya.
4. Buang undang-undang yang palui: Jangan biarkan orang bisnes susah sangat. Kasi senang sikit.
5. Bagi peluang orang berusaha: Kasi orang buka kedai, bikin tempat orang cari kerja.
6. Tolong orang miskin: Kasi duit sikit untuk tolong orang susah, supaya dorang boleh hidup.
7. Cuba dapat duit dari luar: Mungkin boleh minta bantuan dari negara lain, atau jadi macam syarikat besar.
8. Cari cara lain selain pinjam: Jangan harap sama pinjaman saja. Cuba cari duit sendiri.
9. Jaga duit dengan baik: Kena pandai-pandai jaga duit, jangan sampai habis semua.
10. Ajar orang jimat duit: Kasi tau pada orang ramai supaya jangan belanja banyak-banyak.
Bah, kamurang fikir apa pasal ni? Ngam ka kalau cuba semua ini? Atau ada lagi yang sia tertinggal? Bilang la sikik, nanti kita bertabiat sama-sama untuk selesai masalah hutang ni.<|eot_id|>
Kedahan
d = [
{'role': 'user', 'content': 'camne nk selesaikan masalah hutang negara, reply in kedah'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
camne nk selesaikan masalah hutang negara, reply in kedah<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Selesai masalah hutang negara ni bukan senang, kena guna macam-macam cara. Kerajaan Malaysia boleh buat macam ni:
1. Cukai lagi tinggi: Bagi oghang kaya bayar cukai lebih sikit. Macam GST dulu tu.
2. Kurangkan belanja: Tolong kurangkan belanja kerajaan, jangan bagi duit tak tentu pasal.
3. Buat ekonomi lagi bagus: Tolong industri yang boleh dapat duit banyak, macam pelancongan ngan teknologi.
4. Baiki undang-undang: Pastikan semua benda jalan betui-betui, tak ada rasuah.
Tapi ingat, nak selesai hutang besar ni bukan senang. Kena sabar lama sikit, tapi kalau buat betui-betui, nanti rakyat pun happy gak.<|eot_id|>
Manglish
d = [
{'role': 'user', 'content': 'camne nk selesaikan masalah hutang negara, reply in manglish'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
camne nk selesaikan masalah hutang negara, reply in manglish<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Wah lau eh, Malaysia kena big problem with national debt leh. Gahmen try many ways to fix dis mess, but still got more work to do lah.
First thing first, Malaysia gahmen must be steady-steady and don't play-play with money one. Must think long-long, make sure everything balanced-balanced, like that can prevent more debt from piling up lor.
Dis gahmen also should focus on making economy grow bigger sia. If economy grow faster, den more people get job, tax come in, all dat good stuff for country pocket. Like dat can help pay off debt slowly-slowly.
Also ah, need to make sure public spending smart-smart. Choose projects dat really help country progress only. Don't anyhow spend here-spend there. Need to think about future generations lah.
Dis government also better learn how to handle debt properly mah. Can look at other countries dat already manage their debt well-well. See what dey do, then maybe can copy some ideas.
If Malaysia want to tackle dis debt issue properly, must change whole system liddat:
1. Make sure no more overspending lah.
2. Make sure everyone pay their fair share of taxes.
3. Get private sector to invest more.
4. Keep eye on budget like hawk.
5. Let market find own price for things.
6. Make sure public debt not too much.
7. Think carefully before borrow money.
8. Work hard to improve economy.
Aiyah, all dis take time lah. Cannot solve overnight one. But if Malaysia follow these steps, confirm can reduce debt step-by-step until manageable one. Den future generations won't cry over debt problem anymore lor. Shiok!<|eot_id|>
Mathematics
Malay
# from https://www.savemyexams.com/a-level/maths_pure/aqa/18/topic-questions/2-algebra--functions/2-2-quadratics/exam-questions/
math = """
expand and simplify
(2x + 1)^2
"""
d = [
{'role': 'user', 'content': math}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
expand and simplify
(2x + 1)^2<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Untuk mengembangkan dan memudahkan (2x + 1)², saya akan menggunakan formula kuadratik:
(a + b)² = a² + 2ab + b²
Dalam kes ini, a = 2x dan b = 1.
Jadi,
(2x + 1)² = (2x)² + 2*(2x)*(1) + 1²
Sekarang, hitung setiap sebutan:
(2x)² = 4x²
2*(2x)*(1) = 4x
1² = 1
Oleh itu, jumlahnya ialah:
4x² + 4x + 1
Saya boleh memfaktorkan faktor sepunya daripada istilah untuk memudahkan ungkapan ini. Faktor sepunya bagi semua istilah adalah 1, jadi ungkapan sudah dipermudahkan kepada:
4x² + 4x + 1
Alternatifnya, saya juga dapat menulis semula ia sebagai:
(2x + 1)(2x + 1)
Tetapi kerana kita telah mendapat bentuk yang lebih ringkas melalui pengembangan kuadratik, saya fikir 4x² + 4x + 1 adalah penyelesaian yang lebih baik.
**Penjelasan:**
- Menggunakan formula kuadratik (a + b)² = a² + 2ab + b² dengan a = 2x dan b = 1.
- Mengira setiap sebutan: (2x)² = 4x², 2*(2x)*(1) = 4x, dan 1² = 1.
- Menambahkan istilah-istilah tersebut bersama-sama untuk mendapatkan 4x² + 4x + 1.
- Memfaktorkan faktor sepunya jika perlu, tetapi dalam kes ini, ia sudah dipermudahkan.
**Keputusan Akhir:**
(2x + 1)² = 4x² + 4x + 1<|eot_id|>
Jawi
# from https://www.savemyexams.com/a-level/maths_pure/aqa/18/topic-questions/2-algebra--functions/2-2-quadratics/exam-questions/
math = """
expand and simplify
(2x + 1)^2
respond in jawi
"""
d = [
{'role': 'user', 'content': math}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
expand and simplify
(2x + 1)^2
respond in jawi<|eot_id|><|start_header_id|>assistant<|end_header_id|>
اونتوق ممڤرلواسکن دان مودهکن (٢x+١)²، ايکوتي لڠکه٢ بريکوت:
١. ايکسترق ڤمبوليه اوبه دري سبلوم تندا ڤنولاكن:
- x = ٢x
- c = ١
٢. ݢنتيکن x دالم اکسڤريسي دڠن ۏربار x يڠ دايکسترق:
- (2*(2x)+1)^2 = (4x+1)^2
٣. ڤرلواسکن ڤندوا:
- (٤x+١)*(٤x+١) = 16x² + 8x + x + 1 = 16x² + 9x + 1
اوبهن اخير: (٢x+١)^٢ = ١٦x² + ٩x + ١<|eot_id|>
Sabahan
math = """
expand and simplify
(2x + 1)^2
respond in sabah
"""
d = [
{'role': 'user', 'content': math}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
expand and simplify
(2x + 1)^2
respond in sabah<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Bah, kunuk sia mau kasi tau sama kamurang macam mana mo bikin formula ni lagi champin. Tingu saja la:
Formula yang ada sekarang tu (2x + 1) kali kuasa dua. Kalau kita expand tu punca panjang lebar, jadi dia jadi 4x² + 4x + 1.
Adui dogo, ndak payah la betrip-trip kalau boleh tulis macam ni dulu:
(2x + 1)² = (2x + 1)(2x + 1)
Lepas tu kita kira-kira:
2x kali 2x tu 4x²
2x kali 1 tu 2x
1 kali 2x tu 2x
1 kali 1 tu 1
Kumpul semua tu nombor:
4x² + 2x + 2x + 1 = 4x² + 4x + 1
Palui betul kalau kita inda faham. Jangan lupa pakai kurungan bila mo tambah-tambah macam ni bah. Kamurang faham ka? Kalau nda, bilang la sikik, nanti kita bertabiat sama-sama.<|eot_id|>
Manglish
math = """
expand and simplify
(2x + 1)^2
respond in sabah
"""
d = [
{'role': 'user', 'content': math}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
expand and simplify
(2x + 1)^2
respond in manglish<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Wah lau eh, you give dis ting (2x + 1)^2, den I tell you how to make it big big and simple simple:
First thing first, must open up dat square hor. So, (2x + 1)^2 become like dis lah:
4x² plus 4x times one plus 1 squared lor.
Now, you know what? Dat "times one" means multiply by one, so same same only. Den got plus 1 squared, which is just 1 one time. So now look like dis:
4x² plus 4x plus 1 lor.
Alright lah, that's it! Dis one confirm plus chop. No need think too much already, very easy peasy. You try yourself can see or not?<|eot_id|>
Coding
Malay coding
d = [
{'role': 'user', 'content': 'code simple website react untuk kedai kasut'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
code simple website react untuk kedai kasut<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Untuk membuat laman web React yang mudah bagi kedai kasut, anda boleh mengikuti langkah-langkah berikut. Ini adalah contoh asas tentang cara menyediakan struktur asas dan elemen penting dalam aplikasi React.
### Langkah 1: Persediaan Projek
1. **Cipta Projek Baru**:
- Buat direktori baru untuk projek ini.
2. **Pasang React CLI**:
- Pastikan Node.js sudah dipasang pada komputer anda.
- Jalankan `npx create-react-app my-kedai-kasut` di terminal.
- Navigasi ke folder project dengan menjalankan `cd my-kedai-kasut`.
3. **Inisialisasi Project**:
- Inisialisasi fail package.json dengan menjalankan `npm init`.
- Pasang pakej-pakej yang diperlukan seperti `react`, `react-dom`, dan `react-router-dom` dengan menjalankan `npm install react react-dom react-router-dom`.
4. **Buat Komponen Utama**:
- Dalam folder `src`, buat fail baru bernama `App.js`. Ini akan menjadi komponen utama aplikasi.
### Langkah 2: Struktur Aplikasi
#### App.js
```javascript
import React from react';
import { BrowserRouter as Router, Route, Switch, withRouter } from'react-router-dom';
// Import semua halaman
import HomePage from './pages/Home';
import ProductPage from './pages/ProductPage';
import AboutUs from './pages/AboutUs';
import ContactUs from './pages/ContactUs';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={HomePage} />
<Route path="/product" component={ProductPage} />
<Route path="/about" component={AboutUs} />
<Route path="/contact" component={ContactUs} />
</Switch>
</Router>
);
}
export default withRouter(App);
```
#### pages/Home.js
```javascript
import React from react';
function HomePage() {
return (
<div className="App">
<h1>Selamat Datang ke Kedai Kasut Kami!</h1>
</div>
);
}
export default HomePage;
```
#### pages/ProductPage.js
```javascript
import React from react';
function ProductPage() {
return (
<div className="App">
<h1>Halaman Produk</h1>
</div>
);
}
export default ProductPage;
```
#### pages/AboutUs.js
```javascript
import React from react';
function AboutUs() {
return (
<div className="App">
<h1>Halaman Mengenai Kami</h1>
</div>
);
}
export default AboutUs;
```
#### pages/ContactUs.js
```javascript
import React from react';
function ContactUs() {
return (
<div className="App">
<h1>Hubungi Kami</h1>
</div>
);
}
export default ContactUs;
```
#### styles.css (atau styles.js)
```css
/* Atau gunakan pustaka CSS seperti Bootstrap atau Tailwind */
.App {
font-size: 16px;
}
```
Jawi coding
d = [
{'role': 'user', 'content': 'code simple website react untuk kedai kasut, reply in jawi'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
code simple website react untuk kedai kasut, reply in jawi<|eot_id|><|start_header_id|>assistant<|end_header_id|>
بريكوت اداله چونتوه لامن ويب رياكت اونتوق كداي كاسوت، منݢݢوناكن تيملين چرياتور:
```jsx
import React from'react';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<h1>كداي كاسوت</h1>
</header>
<main className="App-main">
<section className="App-section">
<h2>كونچي</h2>
<p>كونچي ١٢٥</p>
</section>
<section className="App-section">
<h2>قاعده</h2>
<p>قاعده ڤرتام</p>
</section>
<section className="App-section">
<h2>شريكت</h2>
<p>شريكت نام شريكت</p>
</section>
</main>
<footer className="App-footer">
<p>© ٢٠٢٣ كداي كاسوت</p>
</footer>
</div>
);
}
export default App;
```
سكارڠ، چيڤتا فايل CSS يڠ سڤادن (أو دالم فايل `index.css`):
```css
.App {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
.App-header {
background-color: #f5f5f5;
padding: 10px;
margin-bottom: 20px;
}
.App-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 20px;
}
.App-section {
background-color: #f8f8f8;
padding: 20px;
text-align: center;
}
.App-footer {
background-color: #f5f5f5;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
```
اخيرڽ، اينيسياليساسي تيملين چرياتور دان تمبهكن کود JavaScript دان CSS د اتس ك دالم فايل براسيڠن. اندا جوݢ بوليه مڠوبه سوسون اتور دان ݢاي برداسركن كڤرلوان خاص اندا.<|eot_id|>
Sabahan coding
d = [
{'role': 'user', 'content': 'code simple website react untuk kedai kasut, reply in sabah'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
code simple website react untuk kedai kasut, reply in sabah<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Bah, kunuk sia mau kasi tau macam mana mo bikin laman web React yang senang-senang ja untuk jual kasut. Tingu saja la, mungkin ada buyuk-buyuk yang kita nda tau:
1. **Pasang anu-anu yang perlu**:
- Kasi masuk Node.js sama npm dalam komputer kamurang.
- Lepas tu, pigi folder projek baru, pastu jalankan `npm init` untuk mulakan projek React.
2. **Bikin projek React baru**:
- Taruk `create-react-app` dalam folder projek kamurang.
- Kasi masuk folder `node_modules`, lepas tu jalankan `npm start`.
3. **Pasang anu-anu yang perlu**:
- Kasi masuk `react-router-dom`.
- Taruk dia dengan jalan `npm install react-router-dom`.
4. **Buat laman web**:
- Bikin fail baru nama dia `index.js`.
- Taruk kod ni dalamnya:
```javascript
import React from react';
import { BrowserRouter as Router, Route, Link } from react-router-dom';
import Home from './Home';
import About from './About';
function App() {
return (
<Router>
<Link to="/">Home</Link>
<Link to="/about">About</Link>
<Route path="/home">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Router>
);
}
```
- Lepas tu, taruk fail `Home.js` sama `About.js` di folder `components` yang sama.
5. **Tulis komponen Home**:
```javascript
import React from'react';
const Home = () => {
return (
<div>
<h1>Ini la laman utama!</h1>
<ul>
<li>Kasut lelaki</li>
<li>Kasut betina</li>
<li>Kasut kanak-kanak</li>
</ul>
</div>
);
};
```
6. **Tulis komponen About**:
```javascript
import React from'react';
const About = () => {
return (
<div>
<h1>Info pasal kami</h1>
<p>Kami jual kasut dari banyak jenis.</p>
</div>
);
};
```
7. **Jalankan server tempatan**:
- Guna arahan `npm start` untuk mulakan pelayan pembangunan.
8. **Cuba-cuba guna**:
- Buka browser, pigi `http://localhost:3000/`. Kamurang boleh tingu laman utama sama pasal kami.
Aduii dogo, palui betul kalau kamurang nda faham. Tapi ndapapa, sia harap ini cukup untuk mula-mula. Kalau ada apa-apa lagi, bilang ja!<|eot_id|>
Perak coding
d = [
{'role': 'user', 'content': 'code simple website react untuk kedai kasut, reply in perak'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
code simple website react untuk kedai kasut, reply in perak<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Ate, cher teman buat kode React yang senang-senang je untuk aplikasi web kedai kasut. Kome tengok le:
Mule-mule, kene pasang React ngan Firebase dalam projek TypeScript kome tu.
Lepas tu, bikin fail `App.tsx` macam ni:
```tsx
import React from react';
import { initializeApp } from './firebase/init';
import { Provider as RouterProvider } from'react-router-dom';
import { StoreContext } from './Store/Store';
const App = () => {
const store = initializeApp();
return (
<RouterProvider history={history}>
<StoreContext.Provider value={store}>
{/* Letak komponen lain kome kat sini */}
</StoreContext.Provider>
</RouterProvider>
);
};
export default App;
```
Pastu, buat pulak fail `firebase/init.ts` untuk setup Firebase:
```typescript
import firebase from 'firebase/app';
import 'firebase/functions';
import dotenv from 'dotenv';
env.load({ path: '.env' });
const initializeFirebase = async () => {
try {
await firebase.initializeApp({
provider: firebase.auth.GoogleAuthProvider,
uid: process.env.FIREBASE_APP_DEFAULT_PROJECT_ID,
});
} catch (error) {
console.error('Tak boleh nak initialize Firebase:', error);
}
};
export { initializeFirebase };
```
Jangan lupe letak file `.env` dengan bende ni:
```makefile
FIREBASE_APP_DEFAULT_PROJECT_ID=your-project-id
```
Tukar le `your-project-id` tu dengan ID projek Firebase mike.
Akhir sekali, buat fail `Store.ts` untuk simpan data kedai:
```ts
import { createContext, useContext } from react';
interface IStore {
user: any;
}
const Store: createContext<IStore> = createContext(null);
const useStore = () => useContext(Store);
export { Store, useStore };
```
Ngan `StoreContext.ts`:
```ts
import React from react';
import { IStore } from './Store';
interface StoreContextProps {
user: IStore['user'];
}
const StoreContext = ({ children }: StoreContextProps) => {
const store = new Store(context.value);
return <>{children(store)}</>;
};
export default StoreContext;
```
Macam tu le cara nak buat aplikasi web React yang senang untuk kedai kasut gune Firebase untuk handle API ngan storaj. Mike faham tak? Kalau tak faham, tanya je. Teman boleh terangkan lagi.<|eot_id|>
Manglish coding
d = [
{'role': 'user', 'content': 'code simple website react untuk kedai kasut, reply in manglish'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
code simple website react untuk kedai kasut, reply in manglish<|eot_id|><|start_header_id|>assistant<|end_header_id|>
Eh, you want create one simple React web app for shoe store ah? Okay lah, I teach you how to do. First thing first, make sure you got Node.js and npm installed on your computer or not. If don't have yet, go download from official website lor.
Now, follow these steps step by step hor:
1. Create new React project using `create-react-app` command lah:
```bash
npx create-react-app my-shoe-store
```
2. Go into project directory can already:
```bash
cd my-shoe-store
```
3. Now, remove all the unnecessary stuff they put inside `package.json`. You only need these three things only:
```json
{
"name": "my-shoe-store",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^17.0.1"
}
}
```
4. Next, install all the necessary packages for this app leh:
```bash
npm install react-router-dom
```
5. Now, create new file called `App.js` inside `src` folder. Inside that file, write this code lor:
```javascript
import React from react';
import { BrowserRouter as Router, Route, Switch, withRouter } from react-router-dom';
import Footer from './components/Footer';
import Shop from './pages/Shop';
import Home from './pages/Home';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={withRouter(Home)} />
<Route path="/shop" component={Shop} />
</Switch>
<Footer />
</Router>
);
}
export default App;
```
6. Eh, also create two pages inside `src/pages` folder: `Home.js` and `Shop.js`.
**Home.js**
```javascript
import React from react';
const Home = () => {
return (
<div>
<h1>Welcome to My Shoe Store</h1>
<p>Here you see some information about our store lah.</p>
</div>
);
};
export default Home;
```
**Shop.js**
```javascript
import React from react';
const Shop = () => {
return (
<div>
<h1>Our Shop</h1>
<p>Got many different type of shoes here lor.</p>
</div>
);
};
export default Shop;
```
7. Last last, create `Footer.js` inside `src/components` folder:
**Footer.js**
```javascript
import React from react';
const Footer = () => {
return (
<footer>
<p>© 2023 My Shoe Store. All rights reserved.</p>
</footer>
);
};
export default Footer;
```
Mandarin coding
d = [
{'role': 'user', 'content': 'code simple website react untuk kedai kasut, reply in mandarin'}
]
inputs = tokenizer.apply_chat_template(d, return_tensors = 'pt').to('cuda')
generate_kwargs = dict(
input_ids=inputs,
max_new_tokens=1024,
top_p=0.95,
top_k=50,
temperature=0.6,
do_sample=True,
repetition_penalty=1.1,
streamer=streamer
)
generation_output = model.generate(**generate_kwargs)
<|begin_of_text|><|start_header_id|>system<|end_header_id|>
Cutting Knowledge Date: December 2023
Today Date: 10 Jan 2025
<|eot_id|><|start_header_id|>user<|end_header_id|>
code simple website react untuk kedai kasut, reply in mandarin<|eot_id|><|start_header_id|>assistant<|end_header_id|>
当然可以！以下是一个简单的React应用程序来创建和管理一个名为“SoleMate”的虚拟在线鞋店：
1. 设置项目：在终端中，运行命令`npx create-react-app solemate`.这将创建一个新的React应用程序文件夹。
2. 安装必要的库：在“SoleMate”目录下，运行命令`npm install axios react-router-dom`.这是为了处理服务器请求并设置路由器。
3. 创建组件：在“src”目录下，创建一个名为“App.js”的新文件。以下是该文件的代码：
```
import React from react';
import { BrowserRouter as Router, Route, Switch, useHistoryBase } from react-router-dom';
import Shoes from './Shoes/Shoes';
function App() {
return (
<Router>
<Switch>
<Route exact path="/" component={Shoes} />
</Switch>
</Router>
);
}
```
4. 实现路由：通过添加`history = useHistoryBase()`方法，并使用`Switch`组件来定义不同的路由。
5. 创建页面：在“src/Shoes/Shoes.js”文件中，添加以下代码以显示鞋子的列表：
```javascript
import React from react';
const shoesData = [
{
id: 1,
name: "Nike Air Force One",
description: "A classic basketball shoe.",
price: "$100"
},
{
id: 2,
name: "Adidas Superstar",
description: "A popular running shoe with a distinctive design.",
price: "$120"
}
];
function Shoes() {
const [shoes, setShoes] = React.useState(shoesData);
const handleAddToCart = (id) => {
// Implement adding to cart functionality here.
};
return (
<div className="app">
<h1>SoleMate</h1>
<ul>
{shoes.map((sole) => (
<li key={sole.id}>
<img src={`https://via.placeholder.com/${sole.name}.png`} alt={sole.name} />
<p>{sole.name}</p>
<p>{sole.description}</p>
<p>Price: ${sole.price}</p>
<button onClick={() => handleAddToCart(sole.id)}>Add to Cart</button>
</li>
))}
</ul>
</div>
);
}
export default Shoes;
```
6. 添加购物车功能：您可以添加按钮以允许用户添加所选商品到购物车。这可以实现如下：
- 在`handleAddToCart`函数中，将所选商品添加到您的状态中的购物车数组中。
- 添加购物车计数表示器或更新购物车计数视图组件。
7. 编写完毕：完成后，您应该拥有一个基本的React应用程序，其中包含一个单页呈现鞋子的列表、每个鞋子都有其名称、描述和价格。用户还可以使用按钮添加所选商品到购物车中。此外，您可以扩展此应用程序以包括其他功能，如编辑、删除和更改鞋子等。<|eot_id|>
- Downloads last month
- 147
Inference Providers
NEW
This model is not currently available via any of the supported third-party Inference Providers, and
HF Inference API was unable to determine this model's library.