sspoon.github.io/idaes.html at main · sspoon/sspoon.github.io · 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
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>AI for PrOMMiS | Sarah Poon</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&family=Playfair+Display:wght@600&display=swap" rel="stylesheet" />
  <style>
    .font-inter { font-family: 'Inter', sans-serif; }
    .font-playfair { font-family: 'Playfair Display', serif; }
  </style>
</head>
<body class="bg-fuchsia-50 text-gray-900 font-inter">
  <!-- Header -->
  <header class="bg-fuchsia-100/80 backdrop-blur py-4 border-b border-gray-300 sticky top-0 z-50">
    <div class="max-w-6xl mx-auto flex justify-between items-center px-4">
      <a href="index.html" class="font-playfair text-2xl md:text-3xl text-gray-900 hover:opacity-90">Sarah Poon</a>
      <nav class="space-x-6">
        <a href="projects.html" class="text-gray-700 hover:text-gray-900 hover:underline underline-offset-4">Projects</a>
        <a href="#contact" class="text-gray-700 hover:text-gray-900 hover:underline underline-offset-4">Contact</a>
      </nav>
    </div>
  </header>

  <main class="max-w-6xl mx-auto px-4 py-16 space-y-12">
    <section>
      <h1 class="font-playfair text-3xl md:text-4xl">How AI, conceptual models, and UX can help novice users develop code</h1>
      <p class="mt-3 text-gray-700 ">
      </p>
    </section>


<section class="grid md:grid-cols-2 gap-8 items-start mt-10">
  <!-- Left: Text column -->
  <div>
    <h2 class="font-playfair text-xl md:text-2xl mb-3">Background & Motivation - the PrOMMiS project</h2>
    <p class="text-gray-700">
      Stories about rare earth materials have been all over the news in recent years. Although these elements aren't actually that rare, refining them into usable products requires extracting and processing them from raw materials, and these capabilities are much more scarce. Building the infrastructure for such processes demands significant time and investment. Traditionally, engineers have relied on prototypes and physical models built at multiple scales to test and validate new processing systems before full-scale implementation.<br><br>
    </p>
    <p class="text-gray-700">
      Computational simulation and optimization can help. The PrOMMiS project is a multi-institutional collaboration developing a software modeling platform to accelerate the design and deployment of extraction and purification processes for critical minerals and rare earth elements. At its core is a Python-based library that represents these systems as mathematical equations, enabling computational methods such as optimization to help engineers and planners better understand and work with process models.<br><br>
    </p>
    <p class="text-gray-700">
      Although these methods are powerful, they come with a steep learning curve. Many experienced process engineers are not well-versed in programming or computational optimization techniques. Across numerous interviews, workshops, and meetings, we consistently heard about challenges in learning these libraries and in understanding or debugging the resulting models. A drag-and-drop UI could help simplify building models, but the models themselves can still feel like black boxes — difficult to fully inspect or understand.
    </p>
  </div>

  <!-- Right: Images column -->
  <div class="flex flex-col gap-8">
    <figure class="bg-transparent rounded-2xl p-2 text-center">
      <img
        src="./assets/prommisdiagram.png"
        alt="System diagram showing process stages"
        class="max-w-[80%] max-h-80 object-contain mx-auto"
        loading="lazy"
      />
      <figcaption class="text-sm text-gray-600 italic mt-2">
        A representation of a processing plant that would take in some raw material, like brackish water, and output some concentration of rare earth materials.
      </figcaption>
    </figure>

    <figure class="bg-transparent rounded-2xl p-2 text-center">
      <img
        src="./assets/idaeschallenges.jpg"
        alt="Workshop feedback on model transparency"
        class="max-w-[80%] max-h-80 object-contain mx-auto"
        loading="lazy"
      />
      <figcaption class="text-sm text-gray-600 italic mt-2">
        During a workshop, many users expressed difficulties with the opacity of the models and optimization outputs.
      </figcaption>
    </figure>
  </div>
</section>


    <section class="grid md:grid-cols-2 gap-8 items-start mt-10">
      <!-- Text -->
      <div>
        <h2 class="font-playfair text-xl md:text-2xl mb-3">AI and Conceptual models as powerful partners for non coders</h2>
        <p class="text-gray-700">
          Using agentic AI to help write code is becoming increasingly common, especially when working with unfamiliar codebases and libraries. In response to a prompt, AI agents often provide a narrative explanation of the changes they suggest and why they made them. When integrated into an IDE such as VS Code, they may also generate code diffs so users can visually verify the updates.
<BR><BR>
This approach could be a major step forward in helping new users work with the PrOMMiS framework. However, code diffs alone may not provide enough context for users to fully understand or verify the changes the AI agent makes on their behalf.
<BR><BR>

This led me to reflect on <a href="https://www.linkedin.com/pulse/getting-my-science-app-mobile-ready-help-ai-strudel-science-z81ec/" target="_blank" rel="noreferrer" class="font-inter text-gray-800 underline underline-offset-4 decoration-fuchsia-400 hover:text-gray-900 hover:decoration-2 inline">my experiences using agentic AI to update frontend web code</a>. Even when I didn’t fully understand the code modifications being suggested, I could view the resulting UI changes and confirm that the changes were what I intended. Having a visual representation of the interpreted code — or a conceptual model that abstracts the system’s behavior — provides an important bridge, helping people use AI more confidently in code development.
        </p>
      </div>

      <!-- Screenshot -->
      <figure class="bg-transparent rounded-2xl p-2 text-center">
        <img
          src="./assets/codediff.png"
          class="w-full h-full object-cover"
          loading="lazy"
        />
        <figcaption class="text-sm text-gray-600 italic mt-2">
Example of a code diff previewing changes made by an AI agent. This helps users see what has changed in the code, but it may not be sufficient for verifying that the updates align with their intentions.
      </figcaption>
      </figure>

    </section>
    <section>
      <!-- Text -->
      <div>
        <h2 class="font-playfair text-xl md:text-2xl mb-3">Early UX ideation on a conceptual model design for PrOMMiS</h2>
        <p class="text-gray-700">
There’s still a lot of work to be done, but below is a sneak peek at what a conceptual model for PrOMMiS could look like.
<BR><BR>
When developing this visual conceptual model, I focused on use cases that were most common among novice users — specifically, the areas where they tended to struggle most. These insights came from interviews with both new users and the mentors who frequently support them. One recurring challenge was that beginners often had difficulty changing variables and constraints without violating the system’s bounds.
<BR><BR>
With this in mind, I defined a few key design goals:

<ul class="list-disc marker:text-fuchsia-500 pl-6 space-y-2 text-gray-700 font-inter leading-relaxed mt-3"> <li>Design a domain-specific UI that summarizes the main concepts and relationships within the system.</li> <li>Show how the conceptual model could be integrated into a developer tool powered by an AI agent.</li> <li>Provide a way to highlight which aspects have been modified by the AI agent for inspection and verification.</li> </ul>
          <BR><BR>
        </p>
      </div>

      <!-- Right: screenshot -->
        <img src="./assets/prommis.png" class="rounded-xl shadow-md mb-6">
        <p class="text-gray-700 italic">
        A mockup showing early explorations of the results of an AI-generated code change. The top panel displays the modified code, while the bottom illustrates a conceptual model of that code. Orange highlights indicate the areas affected by the code changes in the conceptual model. In this example, the change introduces issues in the system that are not obvious just by inspecting the code or even the generated output when the code is run. These are now flagged for review.
      </p>
    </section>


        <!-- Back / Contact -->
    <section class="flex flex-wrap items-center gap-4">
      <a href="projects.html" class="text-gray-800 underline underline-offset-4 decoration-fuchsia-400 hover:text-gray-900 hover:decoration-2">
        ← Back to Projects
      </a>

    </section>
  </main>


  <script>document.getElementById("year").textContent = new Date().getFullYear();</script>
</body>
</html>