update site again

Author: oshaikh13

src/components/DemoPage.jsx

@@ -45,7 +45,7 @@ if __name__ == "__main__":
   return (
 
     <div style={{margin: '0 auto', paddingLeft: '5%', paddingRight: '5%', paddingTop: '40px', paddingBottom: '30px' }}>
-      <h1 style={{ marginBottom: '20px', textAlign: 'center' }}>Learning General User Models from Computer Use</h1>
+      <h1 style={{ marginBottom: '20px', textAlign: 'center' }}>Creating General User Models from Computer Use</h1>
 
       <div style={{ display: 'flex', flexWrap: 'wrap', justifyContent: 'center', marginBottom: '10px' }}>
         <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', margin: '0 15px', marginBottom: '15px' }}>
@@ -167,9 +167,72 @@ if __name__ == "__main__":
           margin: '0',
           fontSize: '15px'
         }}>
-          We introduce a general user model (GUM) that helps computers better understand your actions, needs, and preferences by observing any interaction you have with your computer (with a vision-language model). By using GUMs, apps and assistants can proactively suggest and execute helpful actions without needing to explicitly ask.
+          We introduce a general user model (GUM) that helps computers better understand your actions, needs, and preferences by observing any interaction you have with your computer (with a vision-language model). Through observation alone, GUMs construct confidence-weighted natural language propositions. These propositions are iteratively revised based on continued interaction <em>of any kind</em>.
         </p>
 
+        {/* Example GUM Card */}
+        <div style={{
+          marginTop: '10px',
+          marginLeft: 'auto',
+          marginRight: 'auto',
+          width: '250px'
+        }}>
+          <div style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            marginBottom: '4px',
+            paddingLeft: '1px',
+            paddingRight: '1px'
+          }}>
+            <div style={{
+              color: 'var(--color-main-text)',
+              fontSize: '15px'
+            }}>
+              proposition
+            </div>
+            <div style={{
+              color: 'var(--color-main-text)',
+              fontSize: '15px'
+            }}>
+              confidence
+            </div>
+          </div>
+          <div style={{ 
+            display: 'flex', 
+            alignItems: 'center',
+            backgroundColor: 'var(--color-main-text)',
+            borderRadius: '8px',
+            padding: '16px',
+            paddingTop: '12px',
+            paddingBottom: '12px'
+          }}>
+            <div style={{
+              width: '340px',
+              color: '#333',
+              fontFamily: 'sans-serif',
+              fontSize: '16px',
+              lineHeight: '1.2'
+            }}>
+              User is interested in General User Models
+            </div>
+            <div style={{
+              width: '1px',
+              backgroundColor: '#888888',
+              height: '40px',
+              margin: '0 8px'
+            }}></div>
+            <div style={{
+              flex: 1,
+              fontWeight: 'bold',
+              fontSize: '17px',
+              color: '#333',
+              textAlign: 'center'
+            }}>
+              0.9
+            </div>
+          </div>
+        </div>
+
       </div>
 
 
@@ -212,7 +275,7 @@ if __name__ == "__main__":
           margin: '0',
           fontSize: '15px'
         }}>
-          placeholder placeholder placeholder...
+            Apps and assistants can use GUMs to enable a breadth of applications, like proactively suggest and execute helpful actions without needing to explicitly ask.
         </p>
       </div>
 
@@ -282,10 +345,53 @@ if __name__ == "__main__":
           </SyntaxHighlighter>
         </div>
 
-        <div style={{ marginTop: '20px' }}>
+        <p style={{ 
+          lineHeight: '1.6',
+          // margin: '0',
+          fontSize: '15px'
+        }}>
+          We also have an <a href="https://github.com/omarshaikh/gum-api" target="_blank" rel="noopener noreferrer" style={{ color: '#ff9d9d' }}>example in the repository</a> that connects GUMs to a Model Context Protocol, so you can easily plug a GUM into any chat-based assistant.
+        </p>
+
         <h3 style={{ 
           color: 'var(--color-main-text)', 
-          margin: '0 0 15px 0',
+          margin: '20px 0 15px 0',
+          fontSize: '20px',
+          fontWeight: '600',
+          display: 'flex',
+          alignItems: 'center'
+        }}>
+          How it works
+        </h3>
+        <p style={{ 
+          lineHeight: '1.6',
+          margin: '0',
+          fontSize: '15px'
+        }}>
+          placeholder placeholder placeholder...
+        </p>
+
+        <h3 style={{ 
+          color: 'var(--color-main-text)', 
+          margin: '20px 0 15px 0',
+          fontSize: '20px',
+          fontWeight: '600',
+          display: 'flex',
+          alignItems: 'center'
+        }}>
+          Results
+        </h3>
+        <p style={{ 
+          lineHeight: '1.6',
+          margin: '0',
+          fontSize: '15px'
+        }}>
+          placeholder placeholder placeholder...
+        </p>
+
+        <h3 style={{ 
+          color: 'var(--color-main-text)', 
+          margin: '20px 0 15px 0',
           fontSize: '20px',
           fontWeight: '600',
           display: 'flex',
@@ -305,7 +411,7 @@ if __name__ == "__main__":
           }}>
             <pre id="bibtex-content" style={{ margin: '0' }}>
 {`@article{shaikh2025gums,
-  title={Learning General User Models from Computer Use},
+  title={Creating General User Models from Computer Use},
   author={Shaikh, Omar and Sapkota, Shardul and Rizvi, Shan and Horvitz, Eric and Park, Joon Sung and Yang, Diyi and Bernstein, Michael S.},
   journal={arXiv preprint},
   year={2025}
@@ -339,8 +445,6 @@ if __name__ == "__main__":
           </div>
         </div>
       </div>
-
-    </div>
   );
 };