gitcollab-practical/computer_vision.html at main · tarant28/gitcollab-practical · 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
<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Computer vision</title>
        <link rel="stylesheet" href="mainStyle.css">
        <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-sRIl4kxILFvY47J16cr9ZwB07vP4J8+LH7qKQnuqkuIAvNWLzeN8tE5YBujZqJLB" crossorigin="anonymous">
    </head>
    <body>
        <nav class="navbar navbar-expand-lg">
        <div class="container-fluid">

            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                    <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="index.html">Home</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="ai_industry.html">AI</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="disabilityaids.html">Disability Aids</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="computer_vision.html">Computer Vision</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="RecordKeeping.html">Record Keeping</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="nature.html">Environmental</a>
                    </li>
                    <li class="nav-item">
                    <a class="nav-link" href="Encryption.html">Encryption</a>
                    </li>
                </ul>
            </div>
        </div>
        </nav>
        <div class="container mt-4">
            <h1 class="mb-4">Introduction to Computer Vision</h1>

            <div class="lead mb-4">
                Computer vision — the AI field that teaches machines to "see" and interpret images/video — is already improving public health, accessibility, food security, conservation, disaster response, recycling and more. Below I list the major impact areas, a short concrete example for each, and the most reliable sources supporting those claims.
            </div>

            <div id="carouselExampleControls" class="carousel slide" data-bs-ride="carousel">
                <div class="carousel-inner">
                    <div class="carousel-item active">
                        <img class="d-block w-100" src="CV-1.jpg" alt="First slide">
                    </div>
                    <div class="carousel-item">
                        <img class="d-block w-100" src="CV-2.png" alt="Second slide">
                    </div>
                </div>
                <button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="prev">
                    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Previous</span>
                </button>
                <button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls" data-bs-slide="next">
                    <span class="carousel-control-next-icon" aria-hidden="true"></span>
                    <span class="visually-hidden">Next</span>
                </button>
            </div>

            <h2 class="mb-3">How CV is helping (by sector)</h2>

            <div class="sectors">
                <div class="card mb-3">
                    <div class="card-body bg-primary text-white">
                        <h3 class="h5">1. Healthcare — faster screening, earlier diagnosis</h3>
                        <p>AI/CV models analyze medical images (retina scans, X-rays, MRIs) to detect disease earlier and at scale — especially useful for screening diabetic retinopathy in underserved areas. Some devices/systems have regulatory clearances and real-world deployments.</p>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body bg-secondary text-white">
                        <h3 class="h5">2. Accessibility — assistive vision for blind/low-vision users</h3>
                        <p>Apps and wearable devices use CV to read text, recognize faces/objects, and describe surroundings in real time (smart glasses, phone apps), improving independence for people with visual impairment.</p>
                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body bg-success text-white">
                        <h3 class="h5">3. Agriculture — precision farming, pest & disease detection</h3>
                        <p>Drones, cameras and field sensors + CV detect crop stress, disease and pests earlier so farmers can target treatment, reduce pesticide use, and increase yields. Reviews and field studies show strong gains in monitoring speed and scale.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body bg-danger text-white">
                        <h3 class="h5">4. Conservation & wildlife protection</h3>
                        <p>Automated camera-trap processing and drone footage analysis let ecologists count species, monitor behaviour, and detect poaching more cheaply and at larger scales than manual review. CV reduces human effort and speeds conservation responses.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body bg-warning text-dark">
                        <h3 class="h5">5. Disaster response & humanitarian aid</h3>
                        <p>Satellite and aerial imagery processed with CV models help map floods, earthquakes and fires quickly so responders can prioritise aid and estimate damage. Several projects have demonstrated faster, actionable assessments during real disasters.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body bg-info text-white">
                        <h3 class="h5">6. Circular economy & recycling</h3>
                        <p>CV-guided robots and sorting lines identify and pick recyclable materials (plastics, metals) with higher purity than manual sorting — increasing recycling rates and reducing landfill waste. Commercial deployments and startups are scaling this tech.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body bg-dark text-white">
                        <h3 class="h5">7. Infrastructure and public safety</h3>
                        <p>CV systems inspect roads, bridges, and buildings (crack detection, structural damage) to prioritize maintenance and prevent failures — saving money and improving safety.</p>

                    </div>
                </div>
            </div>

            <h2 class="mb-3 mt-5">Five most important, load-bearing facts</h2>
            <div class="facts">
                <div class="card mb-3">
                    <div class="card-body">
                        <p>CV systems can detect diabetic retinopathy with performance comparable to clinicians and are being integrated into screening programs and devices cleared or deployed in real clinics.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <p>Precision-agriculture CV workflows enable earlier pest/disease detection and more targeted inputs, which studies show reduces losses and chemical use.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <p>Assistive CV devices are commercially available and demonstrably helpful to blind/low-vision users for tasks like reading text and object/scene description.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <p>Automating camera-trap and drone footage with CV greatly reduces manual annotation workload, enabling larger, continuous wildlife monitoring programs and aiding anti-poaching efforts.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <p>CV is being deployed in recycling and waste-sorting at scale, increasing sorting speed and material purity, with recent commercial rollouts and recognition in mainstream press.</p>

                    </div>
                </div>
            </div>

            <h2 class="mb-3 mt-5">Caveats & Responsible Use Notes</h2>
            <div class="caveats">
                <div class="card mb-3">
                    <div class="card-body">
                        <h3 class="h5">Bias / data limitations</h3>
                        <p>CV models can underperform on underrepresented populations or environments unless trained on diverse data; real-world validation is essential.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <h3 class="h5">Human-in-the-loop</h3>
                        <p>Many deployments use CV to assist professionals (triage, pre-screening) rather than fully replace expert judgment.</p>

                    </div>
                </div>

                <div class="card mb-3">
                    <div class="card-body">
                        <h3 class="h5">Privacy & surveillance risk</h3>
                        <p>CV applied to public video can raise privacy concerns; responsible governance, transparency and limits on surveillance are important.</p>
                    </div>
                </div>
            </div>


            <h2 class="mb-3 mt-5">Connect</h2>
            <div class="card mb-4">
                <div class="card-body">
                    <h3>Authored by:</h3>
                    <p><img src="https://avatars.githubusercontent.com/u/223702708?v=4" class="rounded" height="64px"><b> Nopparut Rukkha-anankul</b></p> <!--px invalid syntax as with other pages and no alt text-->
                    <h3 class="h5">LinkedIn</h3>
                    <p>Connect with me on LinkedIn:</p>
                    <p><a href="https://www.linkedin.com/in/nopparut-rukkha-anankul-798a22373" target="_blank" rel="noopener noreferrer" class="btn btn-primary">View LinkedIn profile</a></p>
                    <p>Find me on GitHub:</p>
                    <p><a href="https://github.com/pongy-debug" target="_blank" rel="noopener noreferrer" class="btn btn-primary">View GitHub profile</a></p>
                </div>
            </div>

        </div>
  <!-- Add content before the JS link -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
    <script type="text/javascript" src="javascript.js"></script>
    </body>
</html>