feat: migrate over projects to new hugo format

Signed-off-by: Matt Struble <4325029+mattstruble@users.noreply.github.com>

Author: mattstruble

config/_default/config.toml

@@ -4,9 +4,10 @@ languageName = "English"
 copyright = "© 2020 - 2024 Matt Struble"
 title = "Matt Struble"
 #paginate = 10
+timeout = "60s"
+
 enableRobotsTXT = true
 enableGitInfo = true
-
 # theme = "FixIt"
 
 [build]

content/projects/2019-08-13-heineken-ar/collage.jpg

@@ -0,0 +1,89 @@
+---
+title: Heineken® AR Cheers Campaign
+date: "2019-08-13T00:00:00Z"
+description: A web app that blended augmented reality and artificial intelligence to create an interactive user experience for the Heineken® Formula 1 campaign. The campaign was the first time a brand has used web-based AR technology to power a live competition globally.
+cover:
+    src: preview.png
+    alt: An image separated into three columns. The first column shows two Heineken F1 bottles with a white bottle icon overlayed on top. The second column shows a f1 car rising out of a table with the racing lights above. The third column shows an image of winning two tickets to a concert.
+---
+
+A web app that blended augmented reality and artificial intelligence to create an interactive user experience for the [Heineken® Formula 1](https://www.heineken.com/formula-1) campaign.
+The campaign was the first time a brand has used web-based AR technology to power a live competition globally.
+
+---
+
+## Project Goal
+
+In June I was contracted to develop the image recognition component of the [Heineken® AR Cheers Campaign](https://www.justaftermidnight247.com/case-study/heineken-ar-cheers-campaign/).
+I was given six weeks to create the Heineken® logo detection logic, which needed to fit the following criteria:
+
+1. Be lightweight, and quick enough to operate over a mobile browser without exceeding user bandwidth limits
+2. Able to accurately detect multiple variant Heineken® logos in the same picture
+3. Recognize the following logos:
+![A collage of a variety of different heineken branded products.](collage.jpg "Heineken® Standard, Heineken® Stein Glass, Heineken® F1 Singapore, Heineken® Zero, Heineken® Cup")
+
+## Challenges
+
+##### Recognizing Each Heineken® Logo
+
+One of the most important, and most challenging, aspects of any machine learning project is the training data. The more varied data you have, the more accurate the end result will be
+in a production environment. Finding photos of beer online isn't an issue, [Untappd](https://untappd.com/) has an active user base logging each time they drink a beer with an accompanying photo, and after some quick
+web scraping and cleaning, I was able to generate a training set containing thousands of unique Heineken® photos. The issue was that the Heineken® F1 Singapore
+bottle was unreleased at the time, which means it wasn't on Untappd, meaning all the training data for it had to be created.
+
+Luckily, we were shipped sample F1 bottles to train with. However, only so many images can be generated in-house, and they certainly wouldn't get close to replicating the production environment.
+We did our best, creating around 500 images of the F1 bottle in different scenarios (outside, inside, on the street, in nature, etc) with different viewing angles and liquid levels.
+Still, 500 images pales in comparison to the thousands of other Heineken® samples, which would've lead to an unbalanced model leaning heavily towards everything except the F1 bottle.
+Somehow we needed to come up with more training data to round out the final model, but production was running tight and we could only spend so long collecting data.
+
+The solution was to utilize OpenCV to programmatically introduce randomness to the photos we'd already taken, creating a close-enough representation of different environments.
+The following features were randomly changed, with an allowance of 5% variance, in order to create the rest of the F1 dataset: horizontal flip, crop, scale, brightness, contrast, hue, saturation,
+color, and noise. The end result was a dataset closely matching what was scraped from Untappd, both in size and image variance.
+
+##### Detecting Multiple Logos
+
+![Animation showing two heineken bottles being placed next to each other on a table. With the object detection bounding box shifting between the two.](multi-detect-fail.gif)
+
+After training the intial dataset for a hundred thousand iterations I ran it through some test videos and immediately noticed some issues.
+With all of our training data primarily being single objects, the model had no exposure detecting multiple logos at the same time. Good news was that there was already a pipeline set up
+for generating fake-real data, making the solution as simple as capturing, and labeling, more photos with a focus of presenting as many permutations of the bottles and glasses we could.
+
+##### Limiting False Positives
+
+Once the multiple-detection issue was fixed, the model was close to being finalized and entered beta testing within the overall development team. The expanded user testing revealed that the model was incorrectly
+identifying other labels that closely resembled the target Heineken® logos. This required going back to Untappd and scraping more images of conflicting brands to feed into the model during training. The actual
+labels of the brands didn't matter, all that mattered was that the model didn't falsely identify them as Heineken®, this allowed me to simply group them all as "other" and ignore them in the final model's output.
+
+Now all the required data to train the Heineken® detection model had been created, what was left was to retrain the model and hope for the best come launch.
+
+## Results
+
+![Shows two heineken bottles on a table. The heineken graphic appears overhead with an animation of two bottle icons cheering. Then an F1 car comes out of the table and explodes with a message stating that the user didn't win anything from the raffle.](heineken-f1.gif)
+
+The final model utilized the MobileNet architecture, allowing it to fit within the speed constraints, running a sharded Flask instance on AWS. This ensured that any client, anywhere, could query the custom Flask API with an image,
+and almost immediately receive back where each logo was in the image, labeled by type, as well as the total logo count.
+
+![A work desk with a dozen different heineken bottles and glasses on it. The camera pans across each one showing the detection boxes staying put on each object as they are picked up and moved around.](multi-detect.gif)
+
+After all was said and done, the final model was able to accurately detect any variation of the logos listed above. One small caveat of this was that it performed much better when the bottles or glasses were closer to the camera, and in hand.
+This can be attributed to the training set, both Untappd and ours, being heavily focused on the objects being held in hand and close to the camera.
+Ultimately the requirement for the logos to be closer to the camera didn’t detract from the final product, seeing as it was what the final product was going for.
+The customer wanted the app to be focused on the Heineken® brand, so the expectation was that their products would be front and center for each raffle submission.
+
+The gifs below highlight some more example environments we ran the model through. You can notice the false positive issue within in the liquor store example as the model makes a few false detections when it flashes
+past some corona bottles. This is due to the motion blur, and was mostly fixed above, but as an added precaution the app required the users to hold the phone steady prior to making a prediction.
+
+![Shows the object detection in use in a standard kitchen. With only the heineken bottle being detected and not any other beer can or bottle.](kitchen-positive.gif)
+
+![A small gif of looking through the glass door in a liquor store. We see the object detection flash over the corona bottle, and as the camera pans quickly. But when it slows down on a specific Presidente bottle there is no detection](liquor_store_false.gif)
+
+## Summary
+
+This project was the first time I've released a machine learning model into a live production environment.
+In doing so I was introduced to the entire machine learning development pipeline, from data retrieval, to user testing, and finally release and maintenance.
+
+One of the key takeaways was how much training data needs to be reflective of the final environment. In the beginning I thought that training on individual logos would be enough to meet all the model requirements.
+However, that proved not to be the case, and the overabundance of single-logo training data actually impeded the model development timeline, pushing back beta testing which in turn limited the time between beta and release.
+
+I am now fully aware of the long turnaround time in fixing a model and, if it isn't properly accounted for, how it can easily push back the development timeline.
+Moving forwards I will be more cognisant of including model retraining, and additional data collection, costs in my initial estimates.

content/projects/2019-08-13-heineken-ar/heineken-cheers.jpg

@@ -0,0 +1,104 @@
+---
+title: Analyzing Climate Change Stance Through Twitter Data
+date: "2019-12-01T00:00:00Z"
+description: With 22% of US adults indicating they use Twitter, the platform has become a key stage where the climate change conversation unfolds. As such, this project hoped to understand—and visualize—Americans’ views of climate change as seen through the lens of Twitter.
+---
+
+With 22% of US adults indicating they use Twitter, the platform has become a key stage where the climate change conversation unfolds. As such, this project hoped to understand—and visualize—Americans’ views of climate change as seen through the lens of Twitter.
+
+### Method
+
+The approach was two-pronged:
+
+1. Develop a multi-layered predictive model trained with labeled data.
+2. Create interactive visualizations housed on a dedicated webpage that facilitates comprehension and boosts engagement.
+
+An important distinguishing characteristic of this project is that it aimed to look past the accuracy of an analytical product and relate the sentiment data to demographic characteristics. It also casts a wider net when collecting raw data, incorporating both critical keywords (i.e., “climate change” and “global warming”) and popular hashtags (e.g., #parisagreement, “#climatehoax”) that represent both sides of the conversation.
+
+Like previous approaches, this relies heavily on extracting sentiment from Twitter. Uniquely, the sentiment measurement system operates by combining previous NLP analysis research and hashtag inference. By layering several models, it is effectively creating a boosting network that relies on the weighted sum of all of its sentiment learners to create one strong learner capable of more accurately predicting sentiment.
+
+##### 1. Labeled Data Collection
+
+This project utilized the following labeled datasets for training the predictive models:
+
+1. [Sentiment Analysis – Global Warming/Climate Change](https://www.figure-eight.com/data-for-everyone/)
+2. [Climate Change Sentiment](https://github.com/edwardcqian/climate_change_sentiment)
+3. [Twitter Climate Change Sentiment Dataset](https://www.kaggle.com/edqian/twitter-climate-change-sentiment-dataset)
+
+##### 2. Preprocessing
+
+To prepare the data for the bag of words sentiment prediction and visualization stages, the raw tweets were cleaned to extract any useful components (e.g., isolate tweet from full text pulled in with Twitter API; extract location). A pipeline was created that removed non-standard characters, tokenized words in a tweet, removed stop words and stems the resulting set of words. A vocabulary was generated from this set of words to vectorize tweets and implement a TFIDF transformation. Then the data was enriched using LDA topics and hashtag encodings.
+
+##### 3. Modeling
+
+Leveraging the labeled climate change dataset, different algorithms were tested for the bag of words model and used an ensemble voting model composed from the following classifiers:
+
+* Multinomial Naïve Bayes
+* Multi-layer perceptron classifier model
+* Linear support vector classifier
+
+The voting classifier used a hard-voting system with mostly default hyperparameters. Some adjustments were made to the number of iterations for the multi-layer perceptron, and the number of hidden neurons.
+
+The BERT model leveraged a pretrained model and trained over it, tweaking hyperparameters as needed.
+
+### Model Evaluations
+
+##### Bag of Words Model
+
+###### Model Comparison - Accuracy
+
+| Classifier                |  Training Set | Test Set  |
+| ------------------------- | ------------- | --------- |
+| Logistic Regression       | 73.1%         | 56.8%     |
+| Linear SVC                |  81.0%        | 56.4%     |
+| Multinomial Naïve Bayes   | 70.0%         | 55.3%     |
+| Multi-layered Perception  | 88.5%         | 57.3%     |
+| Ensemble                  | 81.4%         | 59.1%     |
+
+###### F1 Score - Test Set
+
+| Classifier  |  Negative | Neutral  | Positive |
+|:---|:---:|:---:| :---: |
+| Logistic Regression  | 0.61 | 0.49  | 0.59 |
+| Linear SVC  |  0.59 | 0.52  | 0.59 |
+| Multinomial Naïve Bayes  | 0.60  | 0.46  | 0.59 |
+| Multi-layered Perception  | 0.61  | 0.54  | 0.57 |
+| Ensemble  | 0.59  | 0.51  | 0.61 |
+
+The ensemble model performed best when using the bag of words approach. However, the large gap between in-sample performance and out-of-sample performance indicates that overfitting may have occurred.
+This had to be contended with when working with a limited training sample size, particularly when it came to obtaining enough "negative" tweets. Even still, the confusion matrix shows a strong performance while maintaining an evenly divided error rate.
+
+![](bow_conf_test.png)
+
+##### BERT Model
+
+###### BERT Accuracy
+
+|---
+| Iterations | Training | Test
+| :- | :-: | :-:
+| 1 | 72.5% | 66.9%
+| 2 | 92.2% | 65.6%
+| 3 | 95.1% | 67.5%
+
+###### BERT F1 Scoring
+
+| Class | Precision | Recall | F1 | Support |
+| :--- | :---: | :---: | :---: | :---: |
+| Neutral | .68 | .60 | .64 | 1251 |
+| Believer | .69 | .72 | .71 | 1274 |
+| Skeptic | .68 | .73 | .70 | 1224 |
+| Accuracy |  | | .68 | 3749 |
+
+The model consists of two parts, the first of which is a text encoder that transforms tweets into vectors. These are then used in the second part as features. This second part is a deep recurrent neural network that comes "out-of-the-box" with pre-trained weights, which are adjusted as new data is applied in the training step. As can be seen, the validation accuracy during training remained roughly constant throughout the training process, which is a sign of severe overfitting to the training data.
+
+![](bert_conf_test.png)
+
+### Results
+
+![](results.png)
+
+The BERT model was used to classify close to 200,000 tweets relating to global warming, geotagged within the United States over the last ten years. At current Americans overwhelmingly embrace anthropogenic climate change.
+A possible explanation is that Twitter amplifies the voices of a non-representative part of the American population. Specifically, while 22% of Americans as a whole use Twitter, 32% of college-educated adults, 26% of urban citizens, and 38% of adults between the ages of 18 and 29 do so. This shows a clear skew towards a segment of the population that one would expect to endorse human-caused climate change.
+
+The results of the experiment reveal that the reach of the climate change discussion has been following a drastic upward trend since the start of 2018, with hundreds of tweets being sent out a day. The more people discuss climate change on Twitter, the more “positive” the overall sentiment has become, with AGW believers outweighing the skeptics. This is evident in seeing previously fully skeptic states transition to nearly full believers within the last year.

content/projects/2019-08-13-heineken-ar/heineken-f1.gif

@@ -3,6 +3,6 @@ module struble.dev
 go 1.23.1
 
 require (
-	github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240914163845-c9c76f33762b // indirect
-	github.com/schnerring/hugo-mod-json-resume v0.0.0-20240912013022-d0a6933840c5 // indirect
+	github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915022133-fdd5aefc83a5 // indirect
+	github.com/schnerring/hugo-mod-json-resume v0.0.0-20240915013917-03fb24755059 // indirect
 )

content/projects/2019-08-13-heineken-ar/index.md

@@ -1,4 +1,12 @@
 github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240914163845-c9c76f33762b h1:Hcfqk+raK6598tUMqidpoaC6fntNaBDvKLBK1RK3TM8=
 github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240914163845-c9c76f33762b/go.mod h1:r9wZ+bhxo8I4mCrAKRU5k7HRzRRGfXYT10Vstpf3hSA=
+github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915012930-edaf46200e41 h1:Ldh4EB1jtN7JAEJp6mmwx4OJoxFFyf9+1TCFvpf8UyY=
+github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915012930-edaf46200e41/go.mod h1:r9wZ+bhxo8I4mCrAKRU5k7HRzRRGfXYT10Vstpf3hSA=
+github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915014350-99946dec0123 h1:AIEjFfvPGEJf5mg2GpbwMo6ZmlP1YNfKvVzbBJOZMjQ=
+github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915014350-99946dec0123/go.mod h1:r9wZ+bhxo8I4mCrAKRU5k7HRzRRGfXYT10Vstpf3hSA=
+github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915022133-fdd5aefc83a5 h1:PLBkTjW6abJfuRVy7UUWyRkTkxVuLuV1ANa2Ntcycxs=
+github.com/mattstruble/hugo-theme-catpuccin v0.0.0-20240915022133-fdd5aefc83a5/go.mod h1:+QMjNkJVIrbnlGq+hhaLs6BGU2uvhURuEh+tsl50yRw=
 github.com/schnerring/hugo-mod-json-resume v0.0.0-20240912013022-d0a6933840c5 h1:AV/aZDOq1Y9yS9DlK137/xPhfLgzwg0w+IlxBWw5OS4=
 github.com/schnerring/hugo-mod-json-resume v0.0.0-20240912013022-d0a6933840c5/go.mod h1:Pc0QvpaSvbHMym3crVDxSe9O2VpL89TSWEHK3JqPRjQ=
+github.com/schnerring/hugo-mod-json-resume v0.0.0-20240915013917-03fb24755059 h1:VnCxbvjKiRklX8uMyc2yqJC6AmaiHz5uYnXCpvO9MFk=
+github.com/schnerring/hugo-mod-json-resume v0.0.0-20240915013917-03fb24755059/go.mod h1:Pc0QvpaSvbHMym3crVDxSe9O2VpL89TSWEHK3JqPRjQ=

content/projects/2019-08-13-heineken-ar/kitchen-positive.gif

@@ -42,7 +42,7 @@
     "normalize.css": "^8.0.1",
     "prism-themes": "^1.9.0",
     "prismjs": "^1.29.0",
-    "simple-icons": "^13.9.0",
+    "simple-icons": "^13.10.0",
     "typeface-fira-code": "^1.1.13",
     "typeface-roboto-slab": "^1.1.13"
   },