Create a new Svelte app using your preferred method.
Install the required packages: @apollo/client, graphql, material-ui, @material-ui/icons, and @material-ui/core.
In the src folder, create a new file named graphql.js to hold the GraphQL queries for retrieving anime titles and ratings from Anilist.
In the App.svelte file, import the necessary components from Material UI and create a new component to display the anime data.
Use the @apollo/client package to send a GraphQL query to the Anilist API and retrieve the anime data.
Pass the retrieved anime data to the component created in step 4 to display it to the user.
Here is an example code snippet for the graphql.js file:
```js
import { gql } from 'graphql';

export const GET_ANIME = gql`
  query ($search: String!) {
    Page {
      media(search: $search, type: ANIME) {
        title {
          romaji
        }
        averageScore
      }
    }
  }
`;
```

And here is an example code snippet for the App.svelte file:

```html
<script>
  import { useState } from 'svelte';
  import { useQuery } from '@apollo/client';
  import { TextField, Button } from '@material-ui/core';
  import { Search } from '@material-ui/icons';
  import { GET_ANIME } from './graphql';

  let search = '';
  const [animeData, setAnimeData] = useState([]);

  const { loading, error, data } = useQuery(GET_ANIME, {
    variables: { search },
  });

  const handleSearch = () => {
    // Send the query to Anilist API and update animeData state
  };
</script>

<main>
  <h1>Anime Search</h1>
  <div class="search-container">
    <TextField label="Search" variant="outlined" bind:value={search} />
    <Button variant="contained" color="primary" startIcon={<Search />} on:click={handleSearch}>
      Search
    </Button>
  </div>
  <div class="anime-container">
    {animeData.length > 0 ? (
      animeData.map((anime) => (
        <div class="anime-card">
          <h2>{anime.title.romaji}</h2>
          <p>Rating: {anime.averageScore}</p>
        </div>
      ))
    ) : (
      <p>No anime found.</p>
    )}
  </div>
</main>
```

Note: This is just an example and may not be a fully functioning app. You will need to customize and add more code to make it work properly.
สร้างแอป Svelte ใหม่โดยใช้วิธีการที่คุณต้องการ ติดตั้งแพ็คเกจที่จำเป็น: @apollo/client, graphql, material-ui, @material-ui/icons และ @material-ui/core ในโฟลเดอร์ src ให้สร้างไฟล์ใหม่ชื่อ graphql.js เพื่อเก็บคำสั่ง GraphQL สำหรับการเรียกชื่ออนิเมะและเรตติ้งจาก Anilist ในไฟล์ App.svelte ให้นำเข้าส่วนประกอบที่จำเป็นจาก Material UI และสร้างส่วนประกอบใหม่เพื่อแสดงข้อมูลอนิเมะ ใช้แพ็คเกจ @apollo/client เพื่อส่งแบบสอบถาม GraphQL ไปยัง Anilist API และดึงข้อมูลอนิเมะ ส่งข้อมูลอนิเมะที่ดึงมาไปยังส่วนประกอบที่สร้างในขั้นตอนที่ 4 เพื่อแสดงให้ผู้ใช้เห็น นี่คือตัวอย่างโค้ดสำหรับไฟล์ graphql.js: ```js import { gql } from 'graphql'; ส่งออก const GET_ANIME = gql` แบบสอบถาม ($ ค้นหา: สตริง!) { หน้า { สื่อ (ค้นหา: $ ค้นหา ประเภท: ANIME) { ชื่อ { romaji } AverageScore } } } `; ``` และนี่คือตัวอย่างโค้ดสำหรับไฟล์ App.svelte: ```html <script> import { useState } from 'svelte'; นำเข้า { useQuery } จาก '@apollo/client'; นำเข้า { TextField, ปุ่ม } จาก '@material-ui/core'; นำเข้า { ค้นหา } จาก '@material-ui/icons'; นำเข้า { GET_ANIME } จาก './graphql'; ให้ค้นหา = ''; const [animeData, setAnimeData] = useState([]); const { กำลังโหลด ข้อผิดพลาด ข้อมูล } = useQuery(GET_ANIME, { ตัวแปร: { ค้นหา }, }); const handleSearch = () => { // ส่งคำค้นหาไปยัง Anilist API และอัปเดตสถานะ animeData }; </script> <main> <h1>ค้นหาอนิเมะ</h1> <div class="search-container"> <TextField label="Search" Variant="Outlined" Bind:value={search} /> <รูปแบบปุ่ม ="contained" color="primary" startIcon={<ค้นหา />} on:click={handleSearch}> ค้นหา </ปุ่ม> </div> <div class="anime-container"> {animeData.length > 0 ? ( animeData.map((anime) => ( <div class="anime-card"> <h2>{anime.title.romaji}</h2> <p>เรตติ้ง: {anime.averageScore}</p> < /div> )) ) : ( <p>ไม่พบอนิเมะ</p> )} </div> </main> ``` หมายเหตุ: นี่เป็นเพียงตัวอย่างและอาจไม่ใช่แอปที่ทำงานได้อย่างสมบูรณ์ คุณจะต้องปรับแต่งและเพิ่มโค้ดเพิ่มเติมเพื่อให้ทำงานได้อย่างถูกต้อง
spam fails_task lang_mismatch pii not_appropriate hate_speech sexual_content quality toxicity humor helpfulness creativity violence