Got it working! 🍎

2025-02-19 21:43:44 +01:00
parent 658718ca06
commit 61e85ae9a2
20 changed files with 651 additions and 1200 deletions
--- a/frontend/views/meal/success.php
+++ b/frontend/views/meal/success.php
@@ -0,0 +1,83 @@
+<?php
+
+use common\models\Meal;
+use frontend\assets\ConfettiAsset;
+
+/* @var $this yii\web\View */
+
+$this->title = Yii::$app->name;
+
+ConfettiAsset::register($this);
+
+
+$this->registerJs("
+var end = Date.now() + (2 * 1000);
+var scalar = 2;
+var foodEmojis = ['🍕', '🍔', '🍎', '🥑', '🥗', '🍣', '🍩', '🌮', '🍉', '🍞', '🍜', '🥩', '🍪', '🥕', '🧀', '🍓', '🍍', '🥒', '🍇', '🥞', '🦞', '🍗', '🍛'];
+// Create shapes from all emojis
+var emojiShapes = foodEmojis.map(emoji => confetti.shapeFromText({ text: emoji, scalar }));
+var colors = ['#4a8fc4', '#FFA500', '#585858'];
+// Function to pick 3 random unique emojis
+function getRandomEmojis() {
+  let shuffled = emojiShapes.sort(() => 0.5 - Math.random());
+  return shuffled.slice(0, 3); // Get first 3 elements
+}
+
+// Detect if user is on a phone (simple check)
+var isMobile = window.innerWidth < 768; // Adjust as needed for tablets
+
+(function frame() {
+  confetti({    
+    particleCount: isMobile ? 1 : 2, // Fewer particles on mobile
+    angle: 60,
+    spread: isMobile ? 35 : 55, // Less spread on mobile,
+    origin: { x: 0 },
+    shapes: getRandomEmojis(),
+    scalar: isMobile ? 1.5 : 2 // Slightly smaller on mobile
+  });
+  confetti({
+    particleCount: isMobile ? 1 : 2, // Fewer particles on mobile
+    angle: 120,
+    spread: isMobile ? 35 : 55, // Less spread on mobile,
+    origin: { x: 1 },
+    shapes: getRandomEmojis(),
+    scalar: isMobile ? 1.5 : 2 // Slightly smaller on mobile
+  });
+
+  if (Date.now() < end) {
+      requestAnimationFrame(frame);
+  }
+}());");
+?>
+<div class="analysis-result text-center p-4">
+    <h2 class="mb-3">Yum! 🎉</h2>
+
+    <p class="lead">
+        Our AI minions have <i>finished judging</i> you...
+        and your food. But also you. 🤖🍕
+    </p>
+
+    <div class="card mx-auto p-3" style="max-width: 400px; border-radius: 12px; box-shadow: 0 4px 10px rgba(0,0,0,0.1); z-index: 200;">
+        <h4 class="mb-3 text-center">🍽️ <strong><?= $model->food_name ?></strong></h4>
+        <div class="row">
+            <div class="col-6 text-right">
+                <p class="mb-0"><strong>🔥 Calories</strong></p>
+                <p class="mb-0"><strong>🍗 Protein</strong></p>
+                <p class="mb-0"><strong>🥑 Fat</strong></p>
+                <p class="mb-0"><strong>🍞 Carbs</strong></p>
+            </div>
+
+            <div class="col-6">
+                <p class="mb-0"><?= $model->calories ?> kcal</p>
+                <p class="mb-0"><?= $model->protein ?> g</p>
+                <p class="mb-0"><?= $model->fat ?> g</p>
+                <p class="mb-0"><?= $model->carbohydrates ?> g</p>
+            </div>
+        </div>
+    </div>
+    <div class="p-5 mb-4 bg-transparent rounded-3">
+        <div class="container-fluid py-5 text-center">
+            <p><a class="btn btn-lg btn-primary" href="/meal/upload" style="z-index: 200;">Feed me more data! 🍔</a></p>
+        </div>
+    </div>
+</div>
--- a/frontend/views/meal/upload.php
+++ b/frontend/views/meal/upload.php
@@ -0,0 +1,62 @@
+<?php
+
+use yii\helpers\Html;
+use yii\widgets\ActiveForm;
+
+/** @var yii\web\View $this */
+/** @var common\models\Meal $model */
+/** @var yii\widgets\ActiveForm $form */
+
+$emoji = ['🍕', '🍔', '🍎', '🥑', '🥗', '🍣', '🍩', '🌮', '🍉', '🍞', '🍜', '🥩', '🍪', '🥕', '🧀', '🍓', '🍍', '🥒', '🍇', '🥞', '🦞', '🍗', '🍛'];
+$randEmojiIndex = array_rand($emoji, 1);
+$this->registerJS("
+    let foodEmojis = ".json_encode($emoji).";
+    let index = 0;
+    let lastIndex = ".$randEmojiIndex.";
+
+    function cycleEmojis() {
+        let newIndex;
+        do {
+            newIndex = Math.floor(Math.random() * foodEmojis.length);
+        } while (newIndex === lastIndex); // Ensure it's different from the last one
+
+        lastIndex = newIndex; // Update lastIndex to track the last used emoji
+
+        $('#upload-title').fadeOut(200, function() {
+            $(this).html('Upload Your ' + foodEmojis[newIndex]).fadeIn(200);
+        });
+    }
+
+    setInterval(cycleEmojis, 1500); // Change every 1.5 seconds
+    
+     $('#mealform-picture').on('change', function(ev) {
+             $('#submitButton').text('Processing...');
+             $('#submitButton').attr('disabled', true);
+             $(this).parents('form').submit();
+             ev.preventDefault();
+    });
+");
+?>
+
+<div class="meal-form container mt-5">
+    <div class="card shadow-sm p-4">
+        <h5 id="upload-title" class="mb-3">Upload Your <?= $emoji[$randEmojiIndex] ?></h5>
+
+        <?php
+        $form = ActiveForm::begin(['options' => ['enctype' => 'multipart/form-data']]); ?>
+
+        <div class="mb-3">
+            <label for="mealform-picture" class="form-label">Your picture will automatically submit after selected. Just
+                be patient.</label>
+            <?= $form->field($model, 'picture')
+                ->fileInput([
+                    'class' => 'form-control',
+                    //'capture' => 'environment',
+                ]); ?>
+        </div>
+        <div class="form-group">
+            <?= Html::submitButton('Submit', ['id' => 'submitButton', 'class' => 'btn btn-success']) ?>
+        </div>
+        <?php ActiveForm::end(); ?>
+    </div>
+</div>