presentation/ai-connections.html at master · digiguru/presentation · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
<!doctype html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

		<title>Connecting the AIs</title>

		<link rel="stylesheet" href="dist/reset.css">
		<link rel="stylesheet" href="dist/reveal.css">
		<link rel="stylesheet" href="dist/theme/black.css">
		<link rel="stylesheet" href="custom.css">

		<!-- Theme used for syntax highlighted code -->
		<link rel="stylesheet" href="plugin/highlight/monokai.css">

	</head>
	<body>
		<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-RZP8CG4KLJ"></script>
<script src="https://cdn.jsdelivr.net/npm/js-base64@3.7.5/base64.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-RZP8CG4KLJ');
</script>


		<div class="reveal">
			<div class="slides">
				<section data-state="intro" data-background-image="assets/adamhall.jpg">
					<section data-auto-animate data-state="focus-bg">
						<h2>Connect the AIs</h2>
					</section>
					<section data-auto-animate data-state="black" >
						<p>Stay standing up if....</p>
						<ul>
							<li class="fragment fade-up">You have used an LLM</li>
							<li class="fragment fade-up">You have used an LLM to write a report</li>
							<li class="fragment fade-up">You have learned something new using an LLM</li>
							<li class="fragment fade-up">You have written an AI voice service</li>
							<li class="fragment fade-up">You have written an AI Agent application</li>
						</ul>
					</section>
					<section data-auto-animate data-state="black">
						<h2>Adam Hall</h2>
						<h3 class="fragment fade-in-then-semi-out">AI Addict</h3>
						<h3 class="fragment fade-in-then-semi-out">Wrote Google Digital garage's AI productivity training</h3>
						<h3 class="fragment fade-in-then-semi-out">Coached over 70 companies in their AI Adoption</h3>
						<h3 class="fragment fade-in-then-semi-out">⚠️ Warning Live Demos ⚠️</h3>
					</section>

					<section data-auto-animate>
						<img src="assets/ai-growth.png">
					</section>
				</section>
				<section  data-background-image="assets/robot-wannabe.png">
					<section>
						<div class="grid-container grid-cols-5">
							<div>
								<p class="fade-up"><a href="#/2">Research</a></p>
								<p data-fragment-index="5" class="fragment fade-up small">Use AI to study a topic exhaustively</p>
							</div>
							<div class="fragment fade-up" data-fragment-index="1">
								<p><a href="#/3">Explore</a></p>
								<p data-fragment-index="6" class="fragment fade-up small">Swot up on subjects with minimum effort</p>
							</div>
							<div class="fragment fade-up" data-fragment-index="2">
								<p><a href="#/4">Call</a></p>
								<p data-fragment-index="7" class="fragment fade-up small">Forms can now be a quick chat</p>
							</div>
							<div class="fragment fade-up" data-fragment-index="3">
								<p><a href="#/5">Classify</a></p>
								<p data-fragment-index="8" class="fragment fade-up small">Train your own AI system</p>
							</div>
							<div class="fragment fade-up" data-fragment-index="4">
								<p><a href="#/6">Command</a></p>
								<p data-fragment-index="9" class="fragment fade-up small">Treat AI like a scrum team</p>
							</div>

						</div>
					</section>
				</section>
				<section data-background-image="assets/robot-admin.png">
					<section>
						<h1 class="standout">Research</h1>
					</section>

					<section>
						<h2>Research with Google Deep Research</h2>
						<ul>
							<li class="fragment fade-up">Get information about a company</li>
							<li class="fragment fade-up">Do analysis on different Software Vendors</li>
							<li class="fragment fade-up">Find the best price on a given thing</li>
							<li class="fragment fade-up">Do a deep dive into a topic</li>
							<li class="fragment fade-up"><a href="https://gemini.google.com/app" target="_blank">Google Deep Research</a></li>
						</ul>
					</section>
					<section>
						<h2>Research callouts</h2>
						<ul>
							<li class="fragment fade-up">Read the actual content</li>
							<li class="fragment fade-up">It can miss key examples, be as specific as possible</li>
							<li class="fragment fade-up">There is an environmental impact, limit the scope</li>
							<li class="fragment fade-up">Be open about how you arrived at the conclusions</li>
						</ul>
					</section>
					<section>
						<h2>Research Alternatives</h2>
						<ul>
							<li>Google DeepResearch</li>
							<li>OpenAI Detailed Insight</li>
							<li>Perplexity Deep Research</li>
							<li>Grok Deeper Search</li>
						</ul>
					</section>

					<style>
						.grid-cols-5 {
							grid-template-columns: repeat(auto-fill, minmax(19%, 2fr));
						}
						.grid-container-flex {
							grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
						}
						.grid-container {
							display: grid;

							gap: 10px;
						}

						.grid-container>div {
							align-items: center;
							border: 1px solid #ddd;
							padding: 10px;
							height: 80px; /* Ensures equal height */
							font-size: 20px;
							vertical-align: text-top;
						}

						.grid-container p {
							margin: 0;
							font-size: 30px;
						}
						.grid-container .small {
							font-size: 15px;
						}
					</style>

					<section data-auto-animate data-background="black">
						<p>Use AI to take the grunt-work out of research</p>
						<p class="small"><a href="#/1">back</a></p>
					</section>
				</section>
				<section data-background-image="assets/robot-wannabe.png">
					<section data-state="focus-bg">
						<h1 class="standout">Explore</h1>
					</section>
					<section>
						<h2>Explore with NotebookLM</h2>
						<ul>
							<li class="fragment fade-up">Stay on the topic</li>
							<li class="fragment fade-up">Attribute to where it is in the document</li>
							<li class="fragment fade-up">500,000 words</li>
							<li class="fragment fade-up">Learn in new ways</li>
							<li class="fragment fade-up"><a href="https://notebooklm.google/" target="_blank">Notebook LM</a></li>
						</ul>
					</section>
					<section>
						<h2>Explore callouts</h2>
						<ul>
							<li class="fragment fade-up">You can miss key information</li>
							<li class="fragment fade-up">Limits to the amount of podcasts available</li>
							<li class="fragment fade-up">There is an environmental impact, don't go crazy</li>
						</ul>
					</section>
					<section data-auto-animate data-background="black">
						<p>Changes learning approach</p>
						<p class="small"><a href="#/1">back</a></p>
					</section>

				</section>
				<section data-background-image="assets/robot-worry.png">
					<section data-state="focus-bg">
						<h1 class="standout">Call</h1>
					</section>
					<section>
						<h2>Call with Elevenlabs Conversational AI</h2>
						<ul>
							<li class="fragment fade-up">Capture data in innovative ways</li>
							<li class="fragment fade-up">Hear the person in their own voice</li>
							<li class="fragment fade-up">Scale to thousands of phone calls</li>
							<li class="fragment fade-up">Simplify interview analysis</li>

							<li class="fragment fade-up"><a href="https://elevenlabs.io/app/conversational-ai/agents" target="_blank">Elevenlabs</a></li>
						</ul>
					</section>
					<section>
						<h2>Call callouts</h2>
						<ul>
							<li class="fragment fade-up">People can feel scammed</li>
							<li class="fragment fade-up">Can get costly over time</li>
							<li class="fragment fade-up">Analysis paralysis</li>
						</ul>
					</section>
					<section>
						<h2>Alternatives to Elevenlabs Conversational AI</h2>
						<ul>
							<li class="fragment fade-up">OpenAI Realtime</li>
							<li class="fragment fade-up">Gemini Live</li>
						</ul>
					</section>
					<section data-auto-animate data-background="black">
						<p>Data capture innovation</p>
						<p class="small"><a href="#/1">back</a></p>
					</section>

				</section>
				<section data-background-image="assets/robot-app-dev.webp">
					<section data-state="focus-bg">
						<h1 class="standout">Classify</h1>
					</section>
					<section>
						<h2>Classify with Teachable Machine</h2>
						<ul>
							<li class="fragment fade-up">Easily create your own image classification</li>
							<li class="fragment fade-up">Runs offline once trained</li>
							<li class="fragment fade-up">Better for the environment</li>
							<li class="fragment fade-up">Can do audio</li>

							<li class="fragment fade-up"><a href="https://teachablemachine.withgoogle.com/train" target="_blank">Teachable Machine</a></li>
						</ul>
					</section>
					<section>
						<h2>Classify callouts</h2>
						<ul>
							<li class="fragment fade-up">Time consuming</li>
							<li class="fragment fade-up">You will need an admin process</li>
							<li class="fragment fade-up">Opaque - it will work, but you can't tell why it works</li>
						</ul>
					</section>
					<section>
						<h2>Alternatives to Teachable Machine</h2>
						<ul>
							<li class="fragment fade-up">Gradient</li>
							<li class="fragment fade-up">Open Mind</li>
							<li class="fragment fade-up">Label Studio</li>
						</ul>
					</section>
					<section data-auto-animate data-background="black">
						<p>Make really bespoke user experiences</p>
						<p class="small"><a href="#/1">back</a></p>
					</section>

				</section>

				<section data-background-image="assets/robot-party.webp">
					<section data-state="focus-bg">
						<h1 class="standout">Command</h1>
					</section>
					<section>
						<h2>Command with Kaiban</h2>
						<ul>
							<li class="fragment fade-up">Chain things together</li>
							<li class="fragment fade-up">Can use local or cloud models</li>
							<li class="fragment fade-up">Ridiculous control</li>
							<li class="fragment fade-up">Can call functions</li>

							<li class="fragment fade-up"><a href="http://localhost:5173/" target="_blank">Kaiban</a></li>
						</ul>
					</section>
					<section>
						<h2>Command callouts</h2>
						<ul>
							<li class="fragment fade-up">Be careful when hosting (Kainban is not secure by default)</li>
							<li class="fragment fade-up">This is a hammer, but your problem might not be a nail</li>
							<li class="fragment fade-up">Can get complex over large processes</li>
							<li class="fragment fade-up">Can easily spiral out of control</li>
							<li class="fragment fade-up">Please don't bring about the AI apocolypse </li>

						</ul>
					</section>
					<section>
						<h2>Alternatives to Kaiban</h2>
						<ul>
							<li class="fragment fade-up">LangChain / LangGraph</li>
							<li class="fragment fade-up">Oracle CrewAI</li>
							<li class="fragment fade-up">Microsoft AutoGen</li>
							<li class="fragment fade-up">Hugging Face AutoGen</li>
							<li class="fragment fade-up">n8n.io</li>
							<li class="fragment fade-up">Google Project Mariner</li>

						</ul>
					</section>
					<section data-auto-animate data-background="black">
						<p>Have a team of AI agents to do your work</p>
						<p class="small"><a href="#/1">back</a></p>
					</section>
				</section>

				<section data-background-image="assets/robot-future.png">
					<section>
						<h2>What are you going to build?</p>
							<img class="fragment" src="assets/feedback-16th-may.png" alt="Feedback">
					</section>

				</section>


			</div>
		</div>

		<script src="dist/reveal.js"></script>
		<script src="js/gpt-component.js"></script>
		<script src="plugin/notes/notes.js"></script>
		<script src="plugin/markdown/markdown.js"></script>
		<script src="plugin/highlight/highlight.js"></script>
		<script>


			Reveal.initialize({
				hash: true,
				// Learn about plugins: https://revealjs.com/plugins/
				//parallaxBackgroundImage: 'assets/adamhall.jpg',
				//parallaxBackgroundSize: "1578px 1578px",
				//parallaxBackgroundHorizontal: 0,

				plugins: [ RevealMarkdown, RevealHighlight, RevealNotes ],

				autoAnimateStyles: [
					'opacity',
					'color',
					'background-color',
					'padding',
					'font-size',
					'line-height',
					'letter-spacing',
					'border-width',
					'border-color',
					'border-radius',
					'outline',
					'outline-offset',
					'grid-template-columns',
					'width',
					'height',
					'transform',
					'margin-top'
				]
			});


			Reveal.on( 'slidechanged', event => {
				const current = event.currentSlide;
				const background = event.currentSlide.slideBackgroundContentElement.closest(".stack").querySelector(".slide-background-content")
				console.log("SLIDE", event.currentSlide);
				if(event.currentSlide.dataset.state == "focus-bg") {
					//Reveal.dispatchEvent("focus-bg")
					background.classList.add("focus");
					background.classList.remove("blur");

				} else {// if(event.currentSlide.dataset.state == "blur-bg") {
					background.classList.add("blur");
					background.classList.remove("focus");

					//Reveal.dispatchEvent("blur-bg")
				}

				// event.previousSlide, event.currentSlide, event.indexh, event.indexv
			} );


		</script>
	</body>

<style>
	ul.nostyle {
  list-style-type: none;
}
@property --p{
syntax: '<number>';
inherits: true;
initial-value: 0;
}

.pie {
--p:20;
--b:22px;
--c:darkred;
--w:400px;

width:var(--w);
aspect-ratio:1;
position:relative;
display:inline-grid;
margin:5px;
place-content:center;
font-size:25px;
font-weight:bold;
font-family:sans-serif;
}
.pie:before,
.pie:after {
content:"";
position:absolute;
border-radius:50%;
}
.pie:before {
inset:0;
background:
radial-gradient(farthest-side,var(--c) 98%,#0000) top/var(--b) var(--b) no-repeat,
conic-gradient(var(--c) calc(var(--p)*1%),#0000 0);
-webkit-mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
mask:radial-gradient(farthest-side,#0000 calc(99% - var(--b)),#000 calc(100% - var(--b)));
}
.pie:after {
inset:calc(50% - var(--b)/2);
background:var(--c);
transform:rotate(calc(var(--p)*3.6deg)) translateY(calc(50% - var(--w)/2));
}
.present .animate {
animation:pin 1s 0.5s both;
}
.future .animate, .past .animate {
animation:pout 1s 0.5s both;
}

.no-round:before {
background-size:0 0,auto;
}
.no-round:after {
content:none;
}
@keyframes pin {
from{--p:0}
to{--p:58}
}
@keyframes pout {
from{--p:58}
to{--p:0}
}
body {
font-family:sans-serif;
}

	</style>
</html>