Filament•15mo ago

How can I create a design like in the picture?

I am actually making a translation application, I want to translate the text entered in the first box instantly with gpt and print the answer from gpt in the box next to it. But I was not sure how to proceed.

2 Replies

bwurtz999•15mo ago

Filament pages are Livewire components. So if this is the create page, you could do something like

public $text;
public $english;
public $translation;

public function updating($property, $value)
    {
        // $property: The name of the current property being updated
        // $value: The value about to be set to the property
 
        if($property == 'text') {
          $this->english = $value;
          $this->translation = // some logic and/or function call to generate translation
        }
    }

public $text;
public $english;
public $translation;

public function updating($property, $value)
    {
        // $property: The name of the current property being updated
        // $value: The value about to be set to the property
 
        if($property == 'text') {
          $this->english = $value;
          $this->translation = // some logic and/or function call to generate translation
        }
    }

alexanderkroneis•15mo ago

Grid::make()->schema([
  RichEditor::make(),
  Grid::make()->schema([
    Select::make()->columnSpanFull(),
    Placeholder::make(),
    Placeholder::make(),
  ])
])

Grid::make()->schema([
  RichEditor::make(),
  Grid::make()->schema([
    Select::make()->columnSpanFull(),
    Placeholder::make(),
    Placeholder::make(),
  ])
])

Gaming

Programming

How can I create a design like in the picture?