How to use and modify prediction data in Label Studio Frontend Playground (`generateSampleTask.ts`)

Hi Team,

I'm working with the **Label Studio frontend playground** from this repo:
🔗 [https://github.com/HumanSignal/label-studio/tree/develop/web](https://github.com/HumanSignal/label-studio/tree/develop/web)

In the file `generateSampleTask.ts`, I have added some **prediction data** (under the `predictions` field) along with sample annotation data.

Here's what I'm trying to do:

---

### ✅ **Goals**

1. **Use prediction data** to pre-populate the annotation interface.
2. **Edit the predicted results** via the UI just like regular annotations.
3. **Display labels and choices** configured in `configAtoms.ts` correctly for these predicted results.

---

### 📂 Current Setup

I have a `predictions` array that looks like this:

```ts
predictions: [
{
model_version: "one",
score: 0.5,
result: [
{
id: "result1",
type: "rectanglelabels",
from_name: "label",
to_name: "image",
value: {
x: 4.98, y: 12.82, width: 32.52, height: 44.91,
rectanglelabels: ["Airplane"]
},
original_width: 600,
original_height: 403
},
...
]
}
]
```

And my label config (`configAtoms.ts`) is:

```xml

```

---

### ❓ My Questions

1. **How can I ensure** that the prediction data is properly **rendered as editable pre-annotations** on the UI?
2. What do I need to **update or configure** (e.g., in `configAtoms.ts` or component code) to match the `from_name`, `to_name`, and `labels` so the prediction results show up properly?
3. Is there a preferred way in Label Studio frontend to **promote prediction results to editable annotations**, or must I handle this manually?

---

Please let me know what files or logic I should focus on to achieve this flow correctly.

Thanks in advance
Veena