Hugging Face's logo

Spaces:
mohpython
/
mohpython-vertex-ai
Running

App Files Community
mohpython commited on
Commit
2ce4541
·
verified ·
1 Parent(s): 4992d4e

undefined - Initial Deployment

Browse files
Files changed (2) hide show
  1. README.md +6 -4
  2. index.html +570 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Mohpython Vertex Ai
3
- emoji: 📊
4
  colorFrom: yellow
5
- colorTo: purple
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: mohpython-vertex-ai
3
+ emoji: 🐳
4
  colorFrom: yellow
5
+ colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,570 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Image Classification with Vertex AI – Step-by-Step Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/atom-one-dark.min.css">
9
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
10
+ <script src="https://kit.fontawesome.com/3a5a3f1b9a.js" crossorigin="anonymous"></script>
11
+ <style>
12
+ .dark-mode {
13
+ background-color: #1a202c;
14
+ color: #f7fafc;
15
+ }
16
+ .dark-mode .card {
17
+ background-color: #2d3748;
18
+ border-color: #4a5568;
19
+ }
20
+ .dark-mode .navbar {
21
+ background-color: #2d3748;
22
+ border-color: #4a5568;
23
+ }
24
+ .dark-mode .footer {
25
+ background-color: #2d3748;
26
+ border-color: #4a5568;
27
+ }
28
+ .dark-mode .code-block {
29
+ background-color: #282c34;
30
+ }
31
+ .dark-mode .section-icon {
32
+ color: #63b3ed;
33
+ }
34
+ </style>
35
+ </head>
36
+ <body class="bg-gray-50 text-gray-800 font-sans">
37
+ <!-- Navigation -->
38
+ <nav class="navbar bg-white shadow-sm sticky top-0 z-50">
39
+ <div class="container mx-auto px-4 py-3 flex justify-between items-center">
40
+ <div class="flex items-center space-x-2">
41
+ <i class="fas fa-robot text-blue-500 text-2xl"></i>
42
+ <span class="text-xl font-bold">Vertex AI Guide</span>
43
+ </div>
44
+ <div class="flex items-center space-x-4">
45
+ <a href="#home" class="hover:text-blue-500">Home</a>
46
+ <a href="#prerequisites" class="hover:text-blue-500">Prerequisites</a>
47
+ <a href="#tutorial" class="hover:text-blue-500">Tutorial</a>
48
+ <a href="#resources" class="hover:text-blue-500">Resources</a>
49
+ <button id="darkModeToggle" class="p-2 rounded-full hover:bg-gray-200 dark-mode:hover:bg-gray-700">
50
+ <i class="fas fa-moon"></i>
51
+ </button>
52
+ </div>
53
+ </div>
54
+ </nav>
55
+
56
+ <!-- Hero Section -->
57
+ <section id="home" class="py-16 bg-gradient-to-r from-blue-50 to-indigo-50 dark-mode:from-gray-800 dark-mode:to-gray-900">
58
+ <div class="container mx-auto px-4">
59
+ <div class="max-w-4xl mx-auto text-center">
60
+ <h1 class="text-4xl md:text-5xl font-bold mb-6">Image Classification with Vertex AI</h1>
61
+ <p class="text-xl mb-8">A step-by-step guide to training and deploying image classification models using Google Vertex AI AutoML Vision</p>
62
+ <div class="flex justify-center space-x-4">
63
+ <a href="#tutorial" class="bg-blue-500 hover:bg-blue-600 text-white px-6 py-3 rounded-lg font-medium">Start Tutorial</a>
64
+ <a href="#prerequisites" class="bg-gray-200 hover:bg-gray-300 dark-mode:bg-gray-700 dark-mode:hover:bg-gray-600 text-gray-800 dark-mode:text-gray-200 px-6 py-3 rounded-lg font-medium">Prerequisites</a>
65
+ </div>
66
+ </div>
67
+ </div>
68
+ </section>
69
+
70
+ <!-- Introduction -->
71
+ <section class="py-12">
72
+ <div class="container mx-auto px-4">
73
+ <div class="max-w-3xl mx-auto">
74
+ <div class="card bg-white p-8 rounded-lg shadow-sm border border-gray-200 mb-8">
75
+ <h2 class="text-2xl font-bold mb-4">Welcome to the Guide!</h2>
76
+ <p class="mb-4">This tutorial is designed for developers, data scientists, and students who want to learn how to build image classification models without deep machine learning expertise.</p>
77
+ <p class="mb-4">We'll use Google Vertex AI's AutoML Vision, which automates much of the model training process while still delivering high-quality results. No need to write complex neural network architectures!</p>
78
+ <p>By the end of this guide, you'll be able to:</p>
79
+ <ul class="list-disc pl-6 mt-2 space-y-1">
80
+ <li>Prepare image datasets for classification</li>
81
+ <li>Train custom models with AutoML Vision</li>
82
+ <li>Evaluate model performance</li>
83
+ <li>Deploy models to production endpoints</li>
84
+ <li>Make predictions using the Python SDK</li>
85
+ </ul>
86
+ </div>
87
+ </div>
88
+ </div>
89
+ </section>
90
+
91
+ <!-- Prerequisites -->
92
+ <section id="prerequisites" class="py-12 bg-gray-50 dark-mode:bg-gray-900">
93
+ <div class="container mx-auto px-4">
94
+ <div class="max-w-4xl mx-auto">
95
+ <div class="flex items-center mb-8">
96
+ <i class="fas fa-clipboard-check section-icon text-3xl mr-4"></i>
97
+ <h2 class="text-3xl font-bold">Prerequisites</h2>
98
+ </div>
99
+
100
+ <div class="grid md:grid-cols-2 gap-6">
101
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
102
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
103
+ <i class="fas fa-cloud mr-2 text-blue-500"></i> Google Cloud Account
104
+ </h3>
105
+ <p>You'll need a Google Cloud account with billing enabled. Vertex AI is a paid service, but new users get $300 in free credits.</p>
106
+ </div>
107
+
108
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
109
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
110
+ <i class="fas fa-project-diagram mr-2 text-blue-500"></i> Google Cloud Project
111
+ </h3>
112
+ <p>Create a new project or select an existing one in the Google Cloud Console where you'll enable the Vertex AI API.</p>
113
+ </div>
114
+
115
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
116
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
117
+ <i class="fas fa-plug mr-2 text-blue-500"></i> Vertex AI API Enabled
118
+ </h3>
119
+ <p>Enable the Vertex AI API for your project. This can be done in the "APIs & Services" section of the Cloud Console.</p>
120
+ </div>
121
+
122
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
123
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
124
+ <i class="fas fa-database mr-2 text-blue-500"></i> Cloud Storage Bucket
125
+ </h3>
126
+ <p>Create a Cloud Storage bucket to store your training data. The bucket should be in the same region where you'll train your model.</p>
127
+ </div>
128
+
129
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
130
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
131
+ <i class="fas fa-code mr-2 text-blue-500"></i> Python Environment
132
+ </h3>
133
+ <p>Set up a Python environment (3.7+) with the Google Cloud SDK installed. We recommend using a virtual environment.</p>
134
+ </div>
135
+
136
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
137
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
138
+ <i class="fas fa-key mr-2 text-blue-500"></i> Authentication
139
+ </h3>
140
+ <p>Set up authentication by creating a service account and downloading the JSON key file. Set the GOOGLE_APPLICATION_CREDENTIALS environment variable.</p>
141
+ </div>
142
+ </div>
143
+
144
+ <div class="mt-8 card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
145
+ <h3 class="text-xl font-semibold mb-3">Install Required Packages</h3>
146
+ <p class="mb-4">Install the Google Cloud Vertex AI SDK and other required packages:</p>
147
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-bash">pip install google-cloud-aiplatform pandas</code></pre>
148
+ </div>
149
+ </div>
150
+ </div>
151
+ </section>
152
+
153
+ <!-- Tutorial Steps -->
154
+ <section id="tutorial" class="py-12">
155
+ <div class="container mx-auto px-4">
156
+ <div class="max-w-4xl mx-auto">
157
+ <div class="flex items-center mb-8">
158
+ <i class="fas fa-graduation-cap section-icon text-3xl mr-4"></i>
159
+ <h2 class="text-3xl font-bold">Step-by-Step Tutorial</h2>
160
+ </div>
161
+
162
+ <!-- Step 1 -->
163
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-8">
164
+ <div class="flex items-center mb-4">
165
+ <div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</div>
166
+ <h3 class="text-2xl font-semibold">Dataset Preparation</h3>
167
+ </div>
168
+
169
+ <p class="mb-4">For image classification with AutoML Vision, your dataset needs to be structured in a specific way:</p>
170
+
171
+ <div class="mb-4">
172
+ <h4 class="font-semibold mb-2">Folder Structure:</h4>
173
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-plaintext">gs://your-bucket-name/
174
+ ├── train/
175
+ │ ├── class1/
176
+ │ │ ├── image1.jpg
177
+ │ │ ├── image2.jpg
178
+ │ │ └── ...
179
+ │ ├── class2/
180
+ │ │ ├── image1.jpg
181
+ │ │ ├── image2.jpg
182
+ │ │ └── ...
183
+ │ └── ...
184
+ └── test/
185
+ ├── class1/
186
+ ├── class2/
187
+ └── ...</code></pre>
188
+ </div>
189
+
190
+ <div class="mb-4">
191
+ <h4 class="font-semibold mb-2">Requirements:</h4>
192
+ <ul class="list-disc pl-6 space-y-1">
193
+ <li>Minimum 10 images per class (100+ recommended for better performance)</li>
194
+ <li>Images should be in JPEG or PNG format</li>
195
+ <li>Each image should be at least 800x600 pixels</li>
196
+ <li>Balance your dataset across classes</li>
197
+ </ul>
198
+ </div>
199
+
200
+ <div>
201
+ <h4 class="font-semibold mb-2">Upload to Cloud Storage:</h4>
202
+ <p>Use the Google Cloud Console or gsutil command-line tool to upload your dataset:</p>
203
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto mt-2"><code class="language-bash">gsutil -m cp -r /path/to/local/dataset gs://your-bucket-name</code></pre>
204
+ </div>
205
+ </div>
206
+
207
+ <!-- Step 2 -->
208
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-8">
209
+ <div class="flex items-center mb-4">
210
+ <div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div>
211
+ <h3 class="text-2xl font-semibold">Create a Vertex AI Dataset</h3>
212
+ </div>
213
+
214
+ <p class="mb-4">Now we'll create a dataset resource in Vertex AI that points to your Cloud Storage data.</p>
215
+
216
+ <div class="mb-4">
217
+ <h4 class="font-semibold mb-2">Using the Python SDK:</h4>
218
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-python">from google.cloud import aiplatform
219
+
220
+ # Initialize the Vertex AI client
221
+ aiplatform.init(project="your-project-id", location="us-central1")
222
+
223
+ # Create an image dataset
224
+ dataset = aiplatform.ImageDataset.create(
225
+ display_name="flowers-classification",
226
+ gcs_source="gs://your-bucket-name/train/**",
227
+ import_schema_uri=aiplatform.schema.dataset.ioformat.image.classification.single_label,
228
+ )
229
+
230
+ print(f"Created dataset: {dataset.resource_name}")</code></pre>
231
+ </div>
232
+
233
+ <div>
234
+ <h4 class="font-semibold mb-2">Alternative: Using the Console</h4>
235
+ <ol class="list-decimal pl-6 space-y-1">
236
+ <li>Go to the Vertex AI section in Google Cloud Console</li>
237
+ <li>Navigate to "Datasets" and click "Create"</li>
238
+ <li>Select "Image classification (Single-label)"</li>
239
+ <li>Enter a name and select your region</li>
240
+ <li>Choose "Select import files from Cloud Storage" and enter your path (gs://your-bucket-name/train/**)</li>
241
+ <li>Click "Create"</li>
242
+ </ol>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Step 3 -->
247
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-8">
248
+ <div class="flex items-center mb-4">
249
+ <div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div>
250
+ <h3 class="text-2xl font-semibold">Train the AutoML Model</h3>
251
+ </div>
252
+
253
+ <p class="mb-4">With your dataset ready, you can now train an AutoML Vision model. This process will automatically:</p>
254
+ <ul class="list-disc pl-6 mb-4 space-y-1">
255
+ <li>Split your data into training/validation sets</li>
256
+ <li>Select the best model architecture</li>
257
+ <li>Tune hyperparameters</li>
258
+ <li>Train and evaluate the model</li>
259
+ </ul>
260
+
261
+ <div class="mb-4">
262
+ <h4 class="font-semibold mb-2">Using the Python SDK:</h4>
263
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-python"># Define training job
264
+ training_job = aiplatform.AutoMLImageTrainingJob(
265
+ display_name="train-flowers-classification",
266
+ prediction_type="classification",
267
+ multi_label=False,
268
+ model_type="CLOUD",
269
+ )
270
+
271
+ # Run the training job
272
+ model = training_job.run(
273
+ dataset=dataset,
274
+ training_fraction_split=0.8,
275
+ validation_fraction_split=0.1,
276
+ test_fraction_split=0.1,
277
+ budget_milli_node_hours=8000, # 8 compute hours
278
+ disable_early_stopping=False,
279
+ )
280
+
281
+ print(f"Training completed. Model: {model.resource_name}")</code></pre>
282
+ </div>
283
+
284
+ <div>
285
+ <h4 class="font-semibold mb-2">Training Considerations:</h4>
286
+ <ul class="list-disc pl-6 space-y-1">
287
+ <li><strong>Budget:</strong> More compute hours generally lead to better models (default is 8 hours)</li>
288
+ <li><strong>Model Type:</strong> "CLOUD" for best accuracy, "MOBILE" for edge deployment</li>
289
+ <li><strong>Monitoring:</strong> Track progress in the Vertex AI Console</li>
290
+ </ul>
291
+ </div>
292
+ </div>
293
+
294
+ <!-- Step 4 -->
295
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-8">
296
+ <div class="flex items-center mb-4">
297
+ <div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">4</div>
298
+ <h3 class="text-2xl font-semibold">Evaluate the Model</h3>
299
+ </div>
300
+
301
+ <p class="mb-4">After training completes, you'll want to evaluate the model's performance before deployment.</p>
302
+
303
+ <div class="mb-4">
304
+ <h4 class="font-semibold mb-2">View Evaluation Metrics:</h4>
305
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-python"># Get evaluation metrics
306
+ evaluation = model.evaluate()
307
+
308
+ print("Model evaluation metrics:")
309
+ print(f"Precision: {evaluation.metrics['precision']}")
310
+ print(f"Recall: {evaluation.metrics['recall']}")
311
+ print(f"F1 Score: {evaluation.metrics['f1Score']}")
312
+ print(f"Confusion Matrix: {evaluation.metrics['confusionMatrix']}")</code></pre>
313
+ </div>
314
+
315
+ <div class="mb-4">
316
+ <h4 class="font-semibold mb-2">Key Metrics to Check:</h4>
317
+ <ul class="list-disc pl-6 space-y-1">
318
+ <li><strong>Precision:</strong> Percentage of correct positive predictions</li>
319
+ <li><strong>Recall:</strong> Percentage of actual positives correctly identified</li>
320
+ <li><strong>F1 Score:</strong> Harmonic mean of precision and recall</li>
321
+ <li><strong>Confusion Matrix:</strong> Shows performance per class</li>
322
+ </ul>
323
+ </div>
324
+
325
+ <div>
326
+ <h4 class="font-semibold mb-2">Console Visualization:</h4>
327
+ <p>For a more visual evaluation, check the "Evaluate" tab in the Vertex AI Console where you can see:</p>
328
+ <ul class="list-disc pl-6 space-y-1">
329
+ <li>Precision-recall curves</li>
330
+ <li>Confusion matrix visualization</li>
331
+ <li>Example predictions with confidence scores</li>
332
+ </ul>
333
+ </div>
334
+ </div>
335
+
336
+ <!-- Step 5 -->
337
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200 mb-8">
338
+ <div class="flex items-center mb-4">
339
+ <div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">5</div>
340
+ <h3 class="text-2xl font-semibold">Deploy the Model</h3>
341
+ </div>
342
+
343
+ <p class="mb-4">To make predictions, you need to deploy your model to an endpoint. This creates a scalable service that can handle prediction requests.</p>
344
+
345
+ <div class="mb-4">
346
+ <h4 class="font-semibold mb-2">Using the Python SDK:</h4>
347
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-python"># Create an endpoint
348
+ endpoint = aiplatform.Endpoint.create(
349
+ display_name="flowers-classification-endpoint",
350
+ project="your-project-id",
351
+ location="us-central1",
352
+ )
353
+
354
+ # Deploy the model to the endpoint
355
+ endpoint.deploy(
356
+ model=model,
357
+ deployed_model_display_name="flowers-classification-model",
358
+ traffic_percentage=100,
359
+ machine_type="n1-standard-4", # Choose appropriate machine type
360
+ min_replica_count=1,
361
+ max_replica_count=1,
362
+ )
363
+
364
+ print(f"Model deployed to endpoint: {endpoint.resource_name}")</code></pre>
365
+ </div>
366
+
367
+ <div>
368
+ <h4 class="font-semibold mb-2">Deployment Considerations:</h4>
369
+ <ul class="list-disc pl-6 space-y-1">
370
+ <li><strong>Machine Type:</strong> Choose based on expected traffic (n1-standard-2 for testing, larger for production)</li>
371
+ <li><strong>Scaling:</strong> Set min/max replicas for automatic scaling</li>
372
+ <li><strong>Cost:</strong> You're billed while the endpoint is running</li>
373
+ <li><strong>Undeploy:</strong> Remember to undeploy when not in use to avoid charges</li>
374
+ </ul>
375
+ </div>
376
+ </div>
377
+
378
+ <!-- Step 6 -->
379
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
380
+ <div class="flex items-center mb-4">
381
+ <div class="bg-blue-500 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">6</div>
382
+ <h3 class="text-2xl font-semibold">Make Predictions</h3>
383
+ </div>
384
+
385
+ <p class="mb-4">With your model deployed to an endpoint, you can now make predictions on new images.</p>
386
+
387
+ <div class="mb-4">
388
+ <h4 class="font-semibold mb-2">Using the Python SDK:</h4>
389
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-python">import base64
390
+
391
+ # Function to encode image
392
+ def encode_image(image_path):
393
+ with open(image_path, "rb") as image_file:
394
+ return base64.b64encode(image_file.read()).decode("utf-8")
395
+
396
+ # Example prediction
397
+ image_path = "path/to/your/test_image.jpg"
398
+ encoded_image = encode_image(image_path)
399
+
400
+ # Make prediction
401
+ prediction = endpoint.predict(
402
+ instances=[{"content": encoded_image}],
403
+ parameters={"confidenceThreshold": 0.5}, # Minimum confidence score
404
+ )
405
+
406
+ # Process results
407
+ for result in prediction.predictions:
408
+ print("Predicted classes:")
409
+ for i, (label, score) in enumerate(zip(result["displayNames"], result["confidences"])):
410
+ print(f"{i+1}. {label}: {score:.2%}")</code></pre>
411
+ </div>
412
+
413
+ <div class="mb-4">
414
+ <h4 class="font-semibold mb-2">Alternative: Batch Prediction</h4>
415
+ <p>For predicting on many images at once, use batch prediction:</p>
416
+ <pre class="code-block bg-gray-100 p-4 rounded-lg overflow-x-auto"><code class="language-python"># Create batch prediction job
417
+ batch_job = model.batch_predict(
418
+ job_display_name="batch-pred-flowers",
419
+ gcs_source="gs://your-bucket-name/test/**",
420
+ gcs_destination_prefix="gs://your-bucket-name/predictions/",
421
+ instances_format="jsonl",
422
+ predictions_format="jsonl",
423
+ )
424
+
425
+ print(f"Batch prediction job: {batch_job.resource_name}")</code></pre>
426
+ </div>
427
+
428
+ <div>
429
+ <h4 class="font-semibold mb-2">Prediction Options:</h4>
430
+ <ul class="list-disc pl-6 space-y-1">
431
+ <li><strong>Online Prediction:</strong> Low-latency requests to the endpoint (good for real-time applications)</li>
432
+ <li><strong>Batch Prediction:</strong> Process many images at once (good for offline processing)</li>
433
+ <li><strong>Confidence Threshold:</strong> Filter predictions by minimum confidence score</li>
434
+ </ul>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </div>
439
+ </section>
440
+
441
+ <!-- Useful Resources -->
442
+ <section id="resources" class="py-12 bg-gray-50 dark-mode:bg-gray-900">
443
+ <div class="container mx-auto px-4">
444
+ <div class="max-w-4xl mx-auto">
445
+ <div class="flex items-center mb-8">
446
+ <i class="fas fa-book section-icon text-3xl mr-4"></i>
447
+ <h2 class="text-3xl font-bold">Useful Resources</h2>
448
+ </div>
449
+
450
+ <div class="grid md:grid-cols-2 gap-6">
451
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
452
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
453
+ <i class="fas fa-file-alt mr-2 text-blue-500"></i> Official Documentation
454
+ </h3>
455
+ <ul class="space-y-2">
456
+ <li><a href="https://cloud.google.com/vertex-ai" class="text-blue-500 hover:underline" target="_blank">Vertex AI Documentation</a></li>
457
+ <li><a href="https://cloud.google.com/vision/automl/docs" class="text-blue-500 hover:underline" target="_blank">AutoML Vision Documentation</a></li>
458
+ <li><a href="https://cloud.google.com/python/docs/reference/aiplatform/latest" class="text-blue-500 hover:underline" target="_blank">Python SDK Reference</a></li>
459
+ </ul>
460
+ </div>
461
+
462
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
463
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
464
+ <i class="fas fa-video mr-2 text-blue-500"></i> Tutorials & Videos
465
+ </h3>
466
+ <ul class="space-y-2">
467
+ <li><a href="https://www.youtube.com/watch?v=zTz8w7Z8Q8I" class="text-blue-500 hover:underline" target="_blank">Vertex AI AutoML Vision Demo</a></li>
468
+ <li><a href="https://cloud.google.com/blog/topics/developers-practitioners/getting-started-vertex-ai" class="text-blue-500 hover:underline" target="_blank">Getting Started with Vertex AI</a></li>
469
+ <li><a href="https://cloud.google.com/ai-platform-unified/docs/tutorials" class="text-blue-500 hover:underline" target="_blank">Official Tutorials</a></li>
470
+ </ul>
471
+ </div>
472
+
473
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
474
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
475
+ <i class="fas fa-dollar-sign mr-2 text-blue-500"></i> Pricing & Quotas
476
+ </h3>
477
+ <ul class="space-y-2">
478
+ <li><a href="https://cloud.google.com/vertex-ai/pricing" class="text-blue-500 hover:underline" target="_blank">Vertex AI Pricing</a></li>
479
+ <li><a href="https://cloud.google.com/vertex-ai/docs/general/quotas" class="text-blue-500 hover:underline" target="_blank">Service Quotas</a></li>
480
+ <li><a href="https://cloud.google.com/free" class="text-blue-500 hover:underline" target="_blank">Free Tier Information</a></li>
481
+ </ul>
482
+ </div>
483
+
484
+ <div class="card bg-white p-6 rounded-lg shadow-sm border border-gray-200">
485
+ <h3 class="text-xl font-semibold mb-3 flex items-center">
486
+ <i class="fas fa-users mr-2 text-blue-500"></i> Community Resources
487
+ </h3>
488
+ <ul class="space-y-2">
489
+ <li><a href="https://stackoverflow.com/questions/tagged/google-cloud-vertex-ai" class="text-blue-500 hover:underline" target="_blank">Stack Overflow</a></li>
490
+ <li><a href="https://github.com/GoogleCloudPlatform/vertex-ai-samples" class="text-blue-500 hover:underline" target="_blank">GitHub Samples</a></li>
491
+ <li><a href="https://groups.google.com/g/google-cloud-ai" class="text-blue-500 hover:underline" target="_blank">Google Group</a></li>
492
+ </ul>
493
+ </div>
494
+ </div>
495
+ </div>
496
+ </div>
497
+ </section>
498
+
499
+ <!-- Footer -->
500
+ <footer class="footer bg-white py-8 border-t border-gray-200">
501
+ <div class="container mx-auto px-4">
502
+ <div class="max-w-4xl mx-auto">
503
+ <div class="flex flex-col md:flex-row justify-between items-center">
504
+ <div class="mb-4 md:mb-0">
505
+ <div class="flex items-center space-x-2">
506
+ <i class="fas fa-robot text-blue-500 text-2xl"></i>
507
+ <span class="text-xl font-bold">Vertex AI Guide</span>
508
+ </div>
509
+ <p class="text-gray-600 mt-2">A step-by-step tutorial for image classification with Vertex AI</p>
510
+ </div>
511
+ <div class="flex space-x-4">
512
+ <a href="#" class="text-gray-600 hover:text-blue-500"><i class="fab fa-github text-xl"></i></a>
513
+ <a href="#" class="text-gray-600 hover:text-blue-500"><i class="fab fa-twitter text-xl"></i></a>
514
+ <a href="#" class="text-gray-600 hover:text-blue-500"><i class="fab fa-linkedin text-xl"></i></a>
515
+ </div>
516
+ </div>
517
+ <div class="mt-8 text-center text-gray-500 text-sm">
518
+ <p>This is an educational resource and not officially affiliated with Google Cloud.</p>
519
+ <p class="mt-2">© 2023 Vertex AI Guide. All rights reserved.</p>
520
+ </div>
521
+ </div>
522
+ </div>
523
+ </footer>
524
+
525
+ <script>
526
+ // Initialize syntax highlighting
527
+ document.addEventListener('DOMContentLoaded', (event) => {
528
+ document.querySelectorAll('pre code').forEach((block) => {
529
+ hljs.highlightElement(block);
530
+ });
531
+ });
532
+
533
+ // Dark mode toggle
534
+ const darkModeToggle = document.getElementById('darkModeToggle');
535
+ const html = document.documentElement;
536
+
537
+ // Check for saved user preference
538
+ const userPrefersDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
539
+ const currentTheme = localStorage.getItem('theme');
540
+
541
+ if (currentTheme === 'dark' || (!currentTheme && userPrefersDark)) {
542
+ html.classList.add('dark-mode');
543
+ darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
544
+ }
545
+
546
+ darkModeToggle.addEventListener('click', () => {
547
+ if (html.classList.contains('dark-mode')) {
548
+ html.classList.remove('dark-mode');
549
+ localStorage.setItem('theme', 'light');
550
+ darkModeToggle.innerHTML = '<i class="fas fa-moon"></i>';
551
+ } else {
552
+ html.classList.add('dark-mode');
553
+ localStorage.setItem('theme', 'dark');
554
+ darkModeToggle.innerHTML = '<i class="fas fa-sun"></i>';
555
+ }
556
+ });
557
+
558
+ // Smooth scrolling for anchor links
559
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
560
+ anchor.addEventListener('click', function (e) {
561
+ e.preventDefault();
562
+
563
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
564
+ behavior: 'smooth'
565
+ });
566
+ });
567
+ });
568
+ </script>
569
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=mohpython/mohpython-vertex-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
570
+ </html>