21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`
1 Overview
2
3This project is a machine learning-based web application designed to detect and classify plants as crops or weeds. The model is built using TensorFlow.js and MobileNet, allowing users to upload images and receive predictions in real time.
4
5🚀 Features
7Real-time plant classification using MobileNet.
8
9User-friendly UI for uploading and analyzing images.
10
11Visual feedback indicating whether the uploaded image is a crop or a weed.
12
13Deployed at: Crop & Weed Detector
42📸 How to Use
43
44Click on the Upload Image button.
45
46Select an image of a crop or weed.
47
48The model will analyze the image and display a prediction with confidence score.
49
50The background color will indicate whether the plant is a crop (green) or weed (red).
54Train a custom model for higher accuracy on agriculture datasets.
55
56Add batch image processing for multiple uploads.
57
58Optimize performance for mobile and low-end devices.
4
5function App() {
6 const [image, setImage] = useState(null);
7 const [prediction, setPrediction] = useState(null);
8
9 const handleImageUpload = async (event) => {
10 const file = event.target.files[0];
11 if (file) {
12 const reader = new FileReader();
13 reader.onloadend = async () => {
14 setImage(reader.result);
15 try {
16 const response = await fetch('/predict', {
32 <h1>🌱 Crop & Weed Detection 🌿</h1>
33 <p style={styles.description}>
34 Upload a field image to detect crops and weeds
35 </p>
36 <input
37 type="file"
38 accept="image/*"
39 onChange={handleImageUpload}
40 style={styles.fileInput}
41 />
42 {image && (
43 <div>
44 <img
45 src={image}
46 alt="Field Image"
47 style={styles.uploadedImage}
48 />
49 </div>
116 borderRadius: '5px'
117 },
118 uploadedImage: {
119 maxWidth: '100%',
120 maxHeight: '400px',
165 if (request.method === 'POST' && request.url.includes('/predict')) {
166 try {
167 const imageBlob = await request.blob();
168
169 // Enhanced mock prediction for crop and weed detection
21## `favicon.svg`
22
23As of this writing Val Town only supports text files, which is why the favicon is an SVG and not an .ico or any other binary image format. If you need binary file storage, check out [Blob Storage](https://docs.val.town/std/blob/).
24
25## `components/`
3It's common to have code and types that are needed on both the frontend and the backend. It's important that you write this code in a particularly defensive way because it's limited by what both environments support:
4
5
6
7For example, you *cannot* use the `Deno` keyword. For imports, you can't use `npm:` specifiers, so we reccomend `https://esm.sh` because it works on the server & client. You *can* use TypeScript because that is transpiled in `/backend/index.ts` for the frontend. Most code that works on the frontend tends to work in Deno, because Deno is designed to support "web-standards", but there are definitely edge cases to look out for.
274 <title>Fitness Tracker</title>
275 <style>${css}</style>
276 <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>💪</text></svg>">
277 </head>
278 <body>
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3Feel free to mess around with this val and make it your own :). Just click on "Fork" in the top right.
4
5You can change the phrases that show up as you click no, you can change the firstImg and secondImg, maybe even add more images. And you can also change the colors and any of the text on the screen!
6
7Have fun with it and hopefully your crush says yes hehe.
3View and interact with your Val Town SQLite data. It's based off Steve's excellent [SQLite Admin](https://www.val.town/v/stevekrouse/sqlite_admin?v=46) val, adding the ability to run SQLite queries directly in the interface. This new version has a revised UI and that's heavily inspired by [LibSQL Studio](https://github.com/invisal/libsql-studio) by [invisal](https://github.com/invisal). This is now more an SPA, with tables, queries and results showing up on the same page.
4
5
6
7## Install
1export default async function(req: Request): Promise<Response> {
2 const catResponse = await fetch("https://api.thecatapi.com/v1/images/search");
3 const [catData] = await catResponse.json();
4
