Merge pull request #66 from BYU-PCCL/staging

adding opinion-dynamics

Author: wingated

experiences/opinion-dynamics/config.json

@@ -0,0 +1,10 @@
+{
+  "id": "opinion-dynamics",
+  "type": "web",
+  "title": "Opinion Dynamics Network",
+  "description": "Interactive opinion dynamics simulation - watch how social media posts influence group opinions in real-time.",
+  "action_hints": ["post a message to the network", "toggle the simulation", "reset the simulation"],
+  "layout": "full",
+  "lifetime": 180,
+  "queueable": true
+}

experiences/opinion-dynamics/controls/lib/index.js

@@ -0,0 +1,109 @@
+/** @jsxImportSource @emotion/react */
+/**
+ * SimulationControls message formats:
+ *   Play:   { type: "simulation", action: "play" }
+ *   Pause:  { type: "simulation", action: "pause" }
+ *   Reset:  { type: "simulation", action: "reset" }
+ *   Send:   { type: "message", value: message }
+ */
+import React, { useState, useCallback } from "react";
+import { css } from "@emotion/react";
+import IconButton from "@material-ui/core/IconButton";
+import Button from "@material-ui/core/Button";
+import TextField from "@material-ui/core/TextField";
+import PlayArrowIcon from "@material-ui/icons/PlayArrow";
+import PauseIcon from "@material-ui/icons/Pause";
+import RefreshIcon from "@material-ui/icons/Refresh";
+import SendIcon from "@material-ui/icons/Send";
+import { useMessaging } from "@footron/controls-client";
+
+const containerStyle = css`
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  padding: 24px;
+  max-width: 350px;
+`;
+
+const buttonRowStyle = css`
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  align-items: center;
+`;
+
+const SimulationControls = () => {
+  const [simulationRunning, setSimulationRunning] = useState(false);
+  const [message, setMessage] = useState("");
+  const [sending, setSending] = useState(false);
+  const { sendMessage } = useMessaging();
+
+  const handleToggleSimulation = useCallback(async () => {
+    setSimulationRunning((prev) => {
+      const next = !prev;
+      sendMessage({ type: "simulation", action: next ? "play" : "pause" });
+      return next;
+    });
+  }, [sendMessage]);
+
+  const handleReset = useCallback(() => {
+    setSimulationRunning(false);
+    sendMessage({ type: "simulation", action: "reset" });
+  }, [sendMessage]);
+
+  const handleSend = useCallback(async () => {
+    if (!message.trim()) return;
+    setSending(true);
+    try {
+      await Promise.resolve(sendMessage({ type: "message", value: message }));
+      setMessage("");
+    } catch (e) {
+      // Optionally handle error
+    } finally {
+      setSending(false);
+    }
+  }, [message, sendMessage]);
+
+  const handleInputKeyPress = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  return (
+    <div css={containerStyle}>
+      <div css={buttonRowStyle}>
+        <IconButton onClick={handleToggleSimulation} color="primary" aria-label="toggle simulation">
+          {simulationRunning ? <PauseIcon /> : <PlayArrowIcon />}
+        </IconButton>
+        <IconButton onClick={handleReset} color="secondary" aria-label="reset simulation">
+          <RefreshIcon />
+        </IconButton>
+      </div>
+      <TextField
+        label="Enter your message..."
+        multiline
+        minRows={2}
+        maxRows={4}
+        variant="outlined"
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyPress={handleInputKeyPress}
+        disabled={sending}
+        fullWidth
+      />
+      <Button
+        variant="contained"
+        color="primary"
+        endIcon={<SendIcon />}
+        onClick={handleSend}
+        disabled={sending || !message.trim()}
+      >
+        {sending ? "Analyzing..." : "Send"}
+      </Button>
+    </div>
+  );
+};
+
+export default SimulationControls;

experiences/opinion-dynamics/thumb.jpg

@@ -0,0 +1,83 @@
+// WARNING: Storing API keys in frontend code exposes them to users. Use at your own risk!
+let OPENAI_API_KEY = null;
+
+// Load API key from key file
+async function loadApiKey() {
+    const response = await fetch('../openai_key.json');
+    if (!response.ok) {
+        throw new Error(`Failed to load OpenAI API key: ${response.status}`);
+    }
+    const keyData = await response.json();
+    OPENAI_API_KEY = keyData.openai_api_key;
+    console.log('API key loaded from openai_key.json');
+}
+
+// Initialize API key loading
+loadApiKey();
+
+export { OPENAI_API_KEY };
+
+export async function analyzePostWithChatGPT(post, opinionAxes, maxRetries = 5) {
+    const systemPrompt = (() => {
+        let prompt = "You analyze social media posts and output opinion vectors with high accuracy. ";
+        prompt += "Focus on the ACTUAL OPINION EXPRESSED, not just keywords. Consider context, tone, and intent.\n";
+        prompt += "For each topic, rate the opinion on a scale of 0.0 to 1.0 where:\n";
+        for (let i = 0; i < opinionAxes.length; i++) {
+            prompt += `\nTopic ${i + 1}: ${opinionAxes[i].name}\n`;
+            prompt += `0.0 = Strongly agrees with: ${opinionAxes[i].con}\n`;
+            prompt += `1.0 = Strongly agrees with: ${opinionAxes[i].pro}\n`;
+            prompt += "0.5 = Neutral or topic not addressed\n";
+        }
+        prompt += "\nEXAMPLES:\n";
+        prompt += "'I love pineapple on pizza! It's a fantastic combination.' = [1.0] (strongest positive)\n";
+        prompt += "'I'm a fan of pineapple on pizza, it's pretty good.' = [0.8] (clearly positive)\n";
+        prompt += "'I guess pineapple on pizza is fine.' = [0.6] (mildly positive)\n";
+        prompt += "'I don't really like pineapple on pizza.' = [0.4] (mildly negative)\n";
+        prompt += "'I really don't like pineapple on pizza.' = [0.2] (clearly negative)\n";
+        prompt += "'Absolutely not. Pineapple on pizza is a hard pass for me.' = [0.0] (strongest negative)\n";
+        prompt += "\nOutput ONLY a JavaScript array of numbers, e.g. [0.8, 0.2]";
+        return prompt;
+    })();
+
+    function validateOpinionVector(result) {
+        try {
+            let vector = eval(result);
+            if (!Array.isArray(vector)) return null;
+            if (!vector.every(x => typeof x === 'number')) return null;
+            if (!vector.every(x => x >= 0 && x <= 1)) return null;
+            while (vector.length < opinionAxes.length) vector.push(0.5);
+            return vector.slice(0, opinionAxes.length);
+        } catch {
+            return null;
+        }
+    }
+
+    for (let attempt = 0; attempt < maxRetries; attempt++) {
+        try {
+            const response = await fetch('https://api.openai.com/v1/chat/completions', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'Authorization': `Bearer ${OPENAI_API_KEY}`
+                },
+                body: JSON.stringify({
+                    model: 'gpt-4o-mini',
+                    messages: [
+                        { role: 'system', content: systemPrompt },
+                        { role: 'user', content: `Analyze this post: ${post}` }
+                    ]
+                })
+            });
+            const data = await response.json();
+            const result = data.choices[0].message.content.trim();
+            const vector = validateOpinionVector(result);
+            if (vector !== null) return vector;
+        } catch (e) {
+            if (attempt === maxRetries - 1) {
+                throw new Error(`Failed after ${maxRetries} attempts: ${e}`);
+            }
+            continue;
+        }
+    }
+    throw new Error(`Failed to get valid opinion vector after ${maxRetries} attempts for post: '${post.slice(0, 50)}...'`);
+}