Skip to content

Commit 8133805

Browse files
HarryLuUMNHarryLuUMN
authored
Merge pull request #56 from Visual-Intelligence-UMN/scores-feature-updates
Scores feature updates
2 parents 0a5ee20 + 0ddbb1f commit 8133805

File tree

4 files changed

+349
-9
lines changed

4 files changed

+349
-9
lines changed

‎src/const.ts‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
const loadingHTML = `
2+
<div style="text-align: center; margin-top: 20px;">
3+
<div class="spinner"></div>
4+
<p><i>Loading report, please wait...</i></p>
5+
</div>
6+
7+
<style>
8+
.spinner {
9+
width: 40px;
10+
height: 40px;
11+
margin: 10px auto;
12+
border: 4px solid #ccc;
13+
border-top-color: #333;
14+
border-radius: 50%;
15+
animation: spin 0.8s linear infinite;
16+
}
17+
18+
@keyframes spin {
19+
to {
20+
transform: rotate(360deg);
21+
}
22+
}
23+
</style>
24+
`;
25+
26+
27+
const initialSkeleton = `
28+
<div class="newspaper">
29+
<h1 class="newspaper-title">The Agentopia Times</h1>
30+
<p class="authors">Written by Professional LLM Journalists</p>
31+
<hr />
32+
<div id="report-content">
33+
${loadingHTML}
34+
</div>
35+
</div>
36+
`;
37+
38+
39+
const loadingStyle = `
40+
<style>
41+
.newspaper {
42+
font-family: "Georgia", serif;
43+
background-color: #f9f6ef;
44+
color: #000;
45+
padding: 40px;
46+
max-width: 960px;
47+
margin: 20px auto;
48+
border-radius: 12px;
49+
box-shadow: 0 0 12px rgba(0,0,0,0.1);
50+
}
51+
52+
.newspaper-title {
53+
font-size: 36px;
54+
font-weight: bold;
55+
text-align: center;
56+
margin-bottom: 0;
57+
text-transform: uppercase;
58+
}
59+
60+
.authors {
61+
font-size: 14px;
62+
text-align: center;
63+
margin-top: 5px;
64+
margin-bottom: 20px;
65+
font-style: italic;
66+
}
67+
</style>
68+
`;
69+
70+
71+
export const baseballGroundTruth = `
72+
This dataset contains performance information about two baseball players, Derek Jeter and David Justice, and their hitting data betweem 1995 and 1996.
73+
This dataset has a phenonmeno called Simpson Paradox.
74+
The dataset shows that David Justice has a higher batting average than Derek Jeter in both 1995 and 1996, but when the data is combined, Derek Jeter has a higher overall batting average.
75+
Here are the statistics for each player:
76+
Derek Jeter:
77+
- Overall: 0.30952380952380953
78+
- 1955: 0.25
79+
- 1996: 0.31443298969072164
80+
David Justice:
81+
- Overall: 0.27041742286751363
82+
- 1955: 0.25304136253041365
83+
- 1956: 0.32142857142857145
84+
`;
85+
86+
87+
export const kidneyGroundTruth = `
88+
This dataset contains performance information about two kidney treatment methods, A and B, and their success rates.
89+
The dataset shows that treatment method A has a higher success rate than treatment method B in both large kidney stone treatment and small kidney stone treatment, but when the data is combined, treatment method B has a higher overall success rate.
90+
Here are the statistics for each treatment method:
91+
Treatment Method A:
92+
- Overall: 0.78
93+
- Large: 0.7300380228136882
94+
- Small: 0.9310344827586207
95+
Treatment Method B:
96+
- Overall: 0.8257142857142857
97+
- Large: 0.6875
98+
- Small: 0.8666666666666667
99+
100+
`;

‎src/game/scenes/level2.tsx‎

Lines changed: 195 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Phaser from 'phaser';
22
import { render } from 'phaser-jsx';
33

4+
import {baseballGroundTruth, kidneyGroundTruth} from '../../const'
5+
46
import { Typewriter } from '../components';
57
import {
68
key,
@@ -79,6 +81,181 @@ export class Level2 extends ParentScene {
7981
private selectedText?: Phaser.GameObjects.Text;
8082
private selectedDataset: string = "none";
8183

84+
private attachInfoIcon(
85+
target: Phaser.GameObjects.Image,
86+
imageKey: string,
87+
offsetX = 35,
88+
offsetY = -20
89+
) {
90+
const icon = this.add.text(
91+
target.x + offsetX,
92+
target.y + offsetY,
93+
'🛈',
94+
{
95+
fontSize: '25px',
96+
color: '#ffffff',
97+
// backgroundColor: '#0000ff',
98+
fontStyle: 'normal',
99+
padding: { x: 8, y: 6 },
100+
fontFamily: 'Verdana',
101+
}
102+
)
103+
.setScrollFactor(0)
104+
.setDepth(9999)
105+
.setOrigin(0.5)
106+
.setResolution(2)
107+
.setInteractive();
108+
109+
// console.log(
110+
// `🧷 Info icon attached to ${target.texture.key} at (${icon.x}, ${icon.y})`
111+
// );
112+
113+
icon.on('pointerover', (pointer: Phaser.Input.Pointer) => {
114+
const hoverWindowX = pointer.x + 230;
115+
const hoverWindowY = pointer.y - 20;
116+
117+
if (!this.hoverWindow) {
118+
const hoverText = this.getInfoText(imageKey);
119+
120+
// Step 1: Create the text and hide it first
121+
this.hoverWindowText = this.add.text(
122+
hoverWindowX,
123+
hoverWindowY,
124+
hoverText,
125+
{
126+
fontFamily: 'Verdana',
127+
fontSize: '16px',
128+
color: '#ffffff',
129+
wordWrap: { width: 500 },
130+
}
131+
)
132+
.setScrollFactor(0)
133+
.setDepth(1012)
134+
.setAlpha(1)
135+
.setVisible(false)
136+
.setOrigin(0.5, 0.5)
137+
.setResolution(2);
138+
139+
140+
// Step 2: Getting the text size
141+
const bounds = this.hoverWindowText.getBounds();
142+
const padding = 20;
143+
144+
// Step 3: Adding a Background
145+
this.hoverWindow = this.add.rectangle(
146+
hoverWindowX,
147+
hoverWindowY,
148+
bounds.width + padding,
149+
bounds.height + padding,
150+
0x000000
151+
)
152+
.setScrollFactor(0)
153+
.setDepth(1011)
154+
.setAlpha(0.9)
155+
.setStrokeStyle(2, 0xffffff);
156+
157+
// Step 4: Displaying Text
158+
this.hoverWindowText.setVisible(true);
159+
}
160+
});
161+
162+
icon.on('pointerout', () => {
163+
this.hoverWindow?.destroy();
164+
this.hoverWindowText?.destroy();
165+
this.hoverWindow = undefined;
166+
this.hoverWindowText = undefined;
167+
});
168+
}
169+
170+
171+
172+
// helper method: returns the corresponding message text based on the imageKey
173+
private getInfoText(imageKey: string): string {
174+
switch(imageKey) {
175+
case 'baseball_groundtruth':
176+
return baseballGroundTruth;
177+
case 'kidney_groundtruth':
178+
return kidneyGroundTruth;
179+
default:
180+
return 'Dataset Info';
181+
}
182+
}
183+
184+
// private attachInfoIcon(
185+
// target: Phaser.GameObjects.Image,
186+
// imageKey: string,
187+
// offsetX = 35,
188+
// offsetY = -35
189+
// ) {
190+
// const x = target.x + offsetX;
191+
// const y = target.y + offsetY;
192+
193+
// const circle = this.add.circle(0, 0, 16, 0xcccccc)
194+
// .setScrollFactor(0);
195+
196+
// const text = this.add.text(0, 0, 'i', {
197+
// fontSize: '18px',
198+
// color: '#000000',
199+
// fontFamily: 'Verdana',
200+
// })
201+
// .setOrigin(0.5)
202+
// .setScrollFactor(0);
203+
204+
// const icon = this.add.container(x, y, [circle, text])
205+
// .setSize(32, 32)
206+
// .setInteractive(
207+
// new Phaser.Geom.Rectangle(-16, -16, 32, 32),
208+
// Phaser.Geom.Rectangle.Contains
209+
// )
210+
// .setScrollFactor(0)
211+
// .setDepth(10000);
212+
213+
// console.log(`Info icon attached to ${target.texture.key} at (${icon.x}, ${icon.y})`);
214+
// console.log(`Target button depth: ${target.depth}, Icon depth: ${icon.depth}`);
215+
216+
// icon.on('pointerover', (pointer: Phaser.Input.Pointer) => {
217+
// const hoverWindowX = pointer.x + 20;
218+
// const hoverWindowY = pointer.y - 20;
219+
220+
// if (!this.hoverWindow) {
221+
// this.hoverWindow = this.add.rectangle(
222+
// hoverWindowX,
223+
// hoverWindowY,
224+
// 135,
225+
// 50,
226+
// 0x000000
227+
// )
228+
// .setScrollFactor(0)
229+
// .setDepth(10001)
230+
// .setAlpha(0.9)
231+
// .setStrokeStyle(2, 0xffffff);
232+
233+
// this.hoverWindowText = this.add.text(
234+
// hoverWindowX,
235+
// hoverWindowY,
236+
// this.getInfoText(imageKey)
237+
// )
238+
// .setScrollFactor(0)
239+
// .setDepth(10002)
240+
// .setAlpha(1)
241+
// .setOrigin(0.5, 0.5)
242+
// .setStyle({
243+
// fontFamily: 'Verdana',
244+
// fontSize: '12px',
245+
// color: '#ffffff',
246+
// });
247+
// }
248+
// });
249+
250+
// icon.on('pointerout', () => {
251+
// this.hoverWindow?.destroy();
252+
// this.hoverWindowText?.destroy();
253+
// this.hoverWindow = undefined;
254+
// this.hoverWindowText = undefined;
255+
// });
256+
257+
// return icon;
258+
// }
82259

83260

84261
constructor() {
@@ -568,15 +745,19 @@ return result;
568745
.setScale(1.5)
569746
.on("pointerover", (pointer:any)=>{
570747
console.log("pointer over");
748+
749+
const hoverWindowX = pointer.x + 50
750+
const hoverWindowY = pointer.y + 50
751+
571752
if(!this.hoverWindow){
572753
this.hoverWindow = this
573754
.add
574-
.rectangle(pointer.x, pointer.y, 135, 50, 0x000000)
755+
.rectangle(hoverWindowX, hoverWindowY, 135, 50, 0x000000)
575756
.setScrollFactor(0)
576757
.setDepth(1011)
577758
.setAlpha(1)
578759
.setStrokeStyle(2, 0xffffff);
579-
this.hoverWindowText = this.add.text(pointer.x, pointer.y, "Baseball Player\nDataset")
760+
this.hoverWindowText = this.add.text(hoverWindowX, hoverWindowY, "Baseball Player\nDataset")
580761
.setScrollFactor(0)
581762
.setDepth(1012)
582763
.setAlpha(1)
@@ -616,14 +797,16 @@ return result;
616797
this.baseBallBtn.setDepth(998);
617798
this.registry.set('currentDataset', 'baseball');
618799

619-
620800
} else {
621801
this.selectedDataset = "none";
622802
this.selectedText?.destroy();
623803
this.baseBallBtn.setDepth(1010);
624804

625805
}
626806
});
807+
console.log("ready to attach info icon for baseball");
808+
this.attachInfoIcon(this.baseBallBtn, 'baseball_groundtruth');
809+
627810

628811
this.add.text(0, 280, 'Start\nSimulation')
629812
.setScrollFactor(0)
@@ -656,15 +839,18 @@ return result;
656839
.setScale(1.5)
657840
.on("pointerover", (pointer:any)=>{
658841
console.log("pointer over");
842+
const hoverWindowX = pointer.x + 50
843+
const hoverWindowY = pointer.y + 50
844+
659845
if(!this.hoverWindow){
660846
this.hoverWindow = this
661847
.add
662-
.rectangle(pointer.x, pointer.y, 135, 50, 0x000000)
848+
.rectangle(hoverWindowX, hoverWindowY, 135, 50, 0x000000)
663849
.setScrollFactor(0)
664850
.setDepth(1011)
665851
.setAlpha(1)
666852
.setStrokeStyle(2, 0xffffff);
667-
this.hoverWindowText = this.add.text(pointer.x, pointer.y, "Kidney Treatments\nDataset")
853+
this.hoverWindowText = this.add.text(hoverWindowX, hoverWindowY, "Kidney Treatments\nDataset")
668854
.setScrollFactor(0)
669855
.setDepth(1012)
670856
.setAlpha(1)
@@ -705,14 +891,17 @@ return result;
705891
.disableInteractive();
706892
this.kidneyBtn.setDepth(998);
707893
this.registry.set('currentDataset', 'kidney');
708-
894+
709895
} else {
710896
this.selectedDataset = "none";
711897
this.selectedText?.destroy();
712898
this.kidneyBtn.setDepth(1010);
713899

714900
}
715901
});
902+
console.log("ready to attach info icon for kidney");
903+
904+
this.attachInfoIcon(this.kidneyBtn, 'kidney_groundtruth');
716905

717906
this.debateStartBtn.on('pointerdown', async () => {
718907
this.registry.set('isWorkflowRunning', true);

‎src/langgraph/agents.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,7 +147,7 @@ export function createManager(
147147
msg = await startTextMessager(roleContent, userContent);
148148
} else if (index === 1) {
149149
const roleContent = "You are a manager responsible for fact-checking." + agent.getBias();
150-
const userContent = "your task is to fact check the given insights and make sure they are correct.\n" + state.sequentialSecondAgentOutput
150+
const userContent = "your task is to fact check the given insights and make sure they are correct.Only return the article after correct those misleading statement. \n" + state.sequentialSecondAgentOutput
151151
msg = await startTextMessager(roleContent, userContent);
152152
} else if (index === 2) {
153153
// generating visualization code

0 commit comments

Comments
 (0)