AI Araçları

Yapay Zeka Yazım Kalıpları Analiz Aracı

warningProblem

"LLM Writing Tropes.md"

psychologyPotansiyel Çözüm

Büyük Dil Modelleri (LLM) tarafından üretilen metinlerdeki tekrarlayan ve klişe haline gelmiş yazım kalıplarını (tropes) tespit edip analiz eden bir web uygulamasıdır. Kullanıcılara, metinlerindeki yapay zeka tarafından üretilmiş gibi duran ifadeleri belirleme, bu kalıpların kökenini anlama ve daha özgün, insanvari bir üslup oluşturma konusunda yardımcı olur.

groupHedef Kitle

LLM'lerle içerik üreten herkes: Yazar adayları, içerik üreticileri, pazarlamacılar, blog yazarları, akademik araştırmacılar, editörler ve LLM'lerin ürettiği metinlerin kalitesini ve özgünlüğünü artırmak isteyen herkes. Özellikle, yapay zeka tarafından üretilen metinlerin farkında olup bundan kaçınmak veya bu kalıpları bilinçli kullanmak isteyen kullanıcılar hedeflenmektedir.

paymentsGelir Modeli

Freemium modeli. Temel analiz ve sınırlı sayıda kalıp tespiti ücretsiz sunulurken, daha derin analizler, geniş kalıp veritabanı erişimi, proje bazlı raporlama ve API erişimi için ücretli abonelik paketleri (örneğin aylık/yıllık).

Aksiyon Planı

Metin Yükleme: Kullanıcıların analiz etmek istedikleri metni doğrudan yapıştırabileceği veya dosya olarak yükleyebileceği bir alan.

Kalıp Tespiti: Yüklenen metindeki LLM'ye özgü olabilecek yaygın yazım kalıplarını (tropes) otomatik olarak tespit etme.

Detaylı Analiz Raporu: Tespit edilen kalıpların listesi, metindeki konumları ve bu kalıpların neden LLM'ye özgü kabul edildiğine dair kısa açıklamalar.

Özgünlük Önerileri: Tespit edilen kalıpları değiştirmek veya daha özgün hale getirmek için basit öneriler sunma.

Pazar Analizi

7.6Puan

Kaynak: Hacker Newsopen_in_new

AI Prompt

As an expert AI application developer, your task is to generate a complete, single-page frontend application (SPA) for a tool that analyzes text for common Large Language Model (LLM) writing tropes. This application should be built using React, styled with Tailwind CSS, and leverage efficient state management. The goal is to provide users with insights into potential AI-generated writing patterns within their text and offer suggestions for more human-like expression.

## 1. PROJECT OVERVIEW:

The application, tentatively named 'Yapay Zeka Yazım Kalıpları Analiz Aracı' (AI Writing Tropes Analyzer), aims to solve the problem of repetitive and generic language often found in text generated by LLMs. Many users struggle to identify these 'tropes' or 'clichés' that can make their writing sound less authentic or unique. Our value proposition is to provide a user-friendly tool that automatically detects these patterns, explains their potential AI origin, and suggests ways to improve the text's originality and human touch. This is crucial for content creators, writers, marketers, and academics who want to ensure their content is distinct and engaging.

## 2. TECH STACK:

- **Frontend Framework:** React (using functional components and hooks)
- **Styling:** Tailwind CSS (for rapid and utility-first styling)
- **State Management:** React Context API or Zustand (for managing application state efficiently)
- **Routing:** React Router DOM (if planning for future multi-page structure, though the MVP is single-page)
- **HTTP Client:** Axios or Fetch API (for potential future API integrations)
- **Build Tool:** Vite (for fast development server and optimized builds)
- **Deployment:** Netlify, Vercel, or similar static hosting platforms.

## 3. CORE FEATURES:

The MVP will focus on the core functionality of text analysis for LLM writing tropes. The user flow will be as follows:

*   **Text Input:**
    *   User lands on the single-page application.
    *   A prominent textarea is displayed, allowing users to paste their text directly.
    *   Alternatively, a button to upload a `.txt` file will be provided.
    *   A clear character/word count indicator should be visible.
*   **Analysis Trigger:**
    *   A "Analyze Text" button is prominently displayed below the input area.
    *   Upon clicking, the application displays a loading indicator.
    *   The input text is sent to a (mock or actual) backend/analysis function.
*   **Results Display:**
    *   Once analysis is complete, the results section dynamically updates.
    *   The original text might be displayed alongside highlighted sections corresponding to detected tropes.
    *   A summary of detected tropes is presented in a clear list.
    *   Each trope in the list should be clickable to reveal more details.
*   **Trope Detail View:**
    *   Clicking a trope in the summary list expands to show:
        *   The specific text snippet identified.
        *   A brief explanation of why this pattern is considered an LLM trope.
        *   Suggestions for rephrasing or making the text more original.
*   **Empty State / Error Handling:**
    *   If no text is entered, the "Analyze Text" button is disabled, or a prompt is shown.
    *   If the analysis fails (e.g., backend error, invalid input), a user-friendly error message is displayed.
    *   If no tropes are detected, a clear "No significant LLM writing tropes found" message is shown.

## 4. UI/UX DESIGN:

*   **Layout:** A clean, single-column layout optimized for readability. The main sections will be:
    1.  Header: App title and potentially a brief tagline.
    2.  Input Section: Textarea/file upload and the analysis button.
    3.  Results Section: Summary of tropes, with expandable details.
    4.  Footer: Copyright and links (optional).
*   **Color Palette:** A modern, professional, and calming color scheme. Example:
    *   Primary (Background): `#f8fafc` (Light Gray/Off-white)
    *   Secondary (Accents, Buttons): `#3b82f6` (Vibrant Blue)
    *   Text: `#1e293b` (Dark Slate Gray)
    *   Highlight/Trope Color: `#fde047` (Yellow) or `#fb923c` (Orange) for detected text.
    *   Loading/Spinner Color: Matches the primary accent.
*   **Typography:** Sans-serif fonts for readability. Use a clear hierarchy (e.g., `Inter` or `Manrope`).
    *   Headings: `font-bold`, `text-2xl` to `text-4xl`
    *   Body Text: `font-normal`, `text-base` or `text-lg`
    *   Code/Snippet Text: `font-mono`, `text-sm`.
*   **Responsive Design:** The layout must adapt seamlessly to various screen sizes (mobile, tablet, desktop). Use Tailwind's responsive prefixes (`sm:`, `md:`, `lg:`) extensively. Ensure the textarea and results are usable on small screens.
*   **Interactions:** Subtle hover effects on buttons and clickable elements. Smooth transitions for expanding/collapsing sections. Clear visual feedback during loading states.

## 5. DATA MODEL:

*   **State:** The primary state will manage the input text, analysis status (idle, loading, success, error), and the detected tropes data.
    *   `inputText`: string (user's input text)
    *   `analysisStatus`: 'idle' | 'loading' | 'success' | 'error'
    *   `analysisError`: string | null
    *   `detectedTropes`: Array of Trope Objects | null

*   **Trope Object Structure:**
    ```javascript
    {
      id: string; // Unique identifier for the trope type
      name: string; // e.g., "Overuse of Adverbs", "Generic Opening"
      description: string; // Explanation of the trope
      suggestions: string[]; // List of rephrasing suggestions
      occurrences: {
        startIndex: number; // Start index in the original text
        endIndex: number; // End index in the original text
        snippet: string; // The actual text snippet
      }[];
    }
    ```

*   **Mock Data:** Initially, we will use mock data. The `detectedTropes` state will be populated with sample data representing different types of LLM writing tropes.

## 6. COMPONENT BREAKDOWN:

*   **`App.jsx`:** Main application component. Manages overall layout, state initialization, and potentially routing (if expanded later).
    *   **Props:** None (manages internal state and child components).
    *   **Responsibility:** Renders Header, InputSection, and ResultsSection.

*   **`Header.jsx`:** Displays the application title and tagline.
    *   **Props:** `title` (string), `tagline` (string).
    *   **Responsibility:** UI for the header.

*   **`InputSection.jsx`:** Contains the textarea, file upload, and analysis button.
    *   **Props:** `onAnalyze` (function), `isLoading` (boolean), `inputContent` (string), `setInputContent` (function).
    *   **Responsibility:** Handles user input and triggers analysis.
    *   **Sub-components:** `TextInputArea.jsx`, `FileUploadButton.jsx`, `AnalyzeButton.jsx`.

*   **`TextInputArea.jsx`:** The actual textarea for text input.
    *   **Props:** `value` (string), `onChange` (function), `placeholder` (string).
    *   **Responsibility:** Captures and updates text input state.

*   **`FileUploadButton.jsx`:** Button to trigger file input.
    *   **Props:** `onFileSelect` (function).
    *   **Responsibility:** Handles file selection and reading.

*   **`AnalyzeButton.jsx`:** The button to start the analysis process.
    *   **Props:** `onClick` (function), `disabled` (boolean).
    *   **Responsibility:** Initiates the analysis action.

*   **`ResultsSection.jsx`:** Displays the analysis results, including the trope summary and details.
    *   **Props:** `tropes` (Array<TropeObject> | null), `isLoading` (boolean), `error` (string | null), `inputText` (string).
    *   **Responsibility:** Renders the output of the analysis.
    *   **Sub-components:** `TropeSummary.jsx`, `TropeDetail.jsx`, `LoadingIndicator.jsx`, `ErrorMessage.jsx`, `NoResultsMessage.jsx`.

*   **`TropeSummary.jsx`:** Lists the detected tropes and provides a way to view details.
    *   **Props:** `tropes` (Array<TropeObject>), `onSelectTrope` (function).
    *   **Responsibility:** Displays a summary list of detected tropes.
    *   **Sub-components:** `TropeListItem.jsx`.

*   **`TropeListItem.jsx`:** A single item in the trope summary list.
    *   **Props:** `trope` (TropeObject), `onClick` (function).
    *   **Responsibility:** Renders a single trope name and handles click events.

*   **`TropeDetail.jsx`:** Displays detailed information about a selected trope.
    *   **Props:** `trope` (TropeObject).
    *   **Responsibility:** Shows explanations, snippets, and suggestions for a specific trope.

*   **`LoadingIndicator.jsx`:** Visual indicator for loading states.
    *   **Props:** None.
    *   **Responsibility:** Displays a spinner or progress bar.

*   **`ErrorMessage.jsx`:** Displays error messages.
    *   **Props:** `message` (string).
    *   **Responsibility:** User-friendly error presentation.

*   **`NoResultsMessage.jsx`:** Displays when no tropes are found.
    *   **Props:** None.
    *   **Responsibility:** Informs the user about the lack of detected tropes.

## 7. ANIMATIONS & INTERACTIONS:

*   **Button Hovers:** Subtle background color change or slight scaling effect on button hover using Tailwind's `hover:` variants.
*   **Section Transitions:** Smooth slide-in or fade-in animations when the results section appears after analysis.
*   **Trope Detail Expand/Collapse:** Use CSS transitions for smooth expansion and collapse of the detailed view for each trope.
*   **Loading State:** A visible loading indicator (e.g., a spinning SVG or a progress bar) should be displayed while the analysis is in progress. Use skeleton loaders for the results section if data fetching is slow.
*   **Micro-interactions:** Subtle feedback on input changes, button clicks (e.g., slight visual press effect).

## 8. EDGE CASES:

*   **Empty Input:** Disable the "Analyze" button if the textarea is empty. Provide a tooltip or visual cue. Handle file uploads of empty files.
*   **Very Long Text:** Implement character limits or provide feedback if the text exceeds a reasonable processing length. Consider pagination or chunking for very large inputs in future versions.
*   **Analysis Errors:** Catch potential errors during the (mock or real) analysis process. Display a generic but informative error message to the user (e.g., "Analysis failed. Please try again later.").
*   **No Tropes Detected:** Display a clear, positive message (e.g., "Great! No significant LLM writing tropes were detected in your text.") instead of an empty results section.
*   **Accessibility (a11y):**
    *   Ensure all interactive elements have proper focus states.
    *   Use semantic HTML tags (`<header>`, `<main>`, `<button>`, etc.).
    *   Provide ARIA attributes where necessary, especially for dynamic content updates.
    *   Ensure sufficient color contrast.
    *   Make the application navigable via keyboard.
*   **Input Validation:** Basic validation to ensure the input is text-based (for direct input) or a valid text file.

## 9. SAMPLE DATA:

Here are examples of `Trope Object` structures:

```javascript
// Example 1: Overuse of Adverbs
{
  "id": "trope-adv-001",
  "name": "Aşırı Zarfların Kullanımı",
  "description": "Yapay zeka modelleri, eylemleri tanımlamak için sıklıkla zarflar (örneğin, 'gerçekten', 'önemli ölçüde', 'oldukça') kullanma eğilimindedir. Bu durum, metni daha az doğal ve akıcı hale getirebilir.",
  "suggestions": [
    "Zarfı kaldırıp fiili daha güçlü hale getirin.",
    "Daha spesifik bir fiil seçin.",
    "Duygusal veya betimleyici bir dil kullanın."
  ],
  "occurrences": [
    {
      "startIndex": 150,
      "endIndex": 175,
      "snippet": "gerçekten etkileyici bir şekilde"
    },
    {
      "startIndex": 300,
      "endIndex": 322,
      "snippet": "oldukça önemli bir rol oynuyor"
    }
  ]
}

// Example 2: Generic Opening
{
  "id": "trope-gen-open-002",
  "name": "Genel Başlangıç İfadeleri",
  "description": "Metinlere 'Günümüzde...', 'Son yıllarda...', 'Bu makalede...' gibi klişe ve belirsiz ifadelerle başlamak, okuyucunun ilgisini çekmeyebilir ve yapay zeka tarafından yazılmış izlenimi verebilir.",
  "suggestions": [
    "Konuyla doğrudan ilgili, çarpıcı bir soru veya istatistikle başlayın.",
    "Okuyucuya doğrudan hitap eden bir ifade kullanın.",
    "Metnin ana fikrini özetleyen kısa ve öz bir giriş yapın."
  ],
  "occurrences": [
    {
      "startIndex": 0,
      "endIndex": 25,
      "snippet": "Günümüzde teknoloji hızla ilerliyor."
    }
  ]
}

// Example 3: Passive Voice Overuse
{
  "id": "trope-passive-003",
  "name": "Edilgen Çatı Aşırı Kullanımı",
  "description": "Edilgen çatı ('yapıldı', 'edildi', 'görüldü' vb.), metni daha mesafeli ve anlaşılması zor hale getirebilir. Aktif çatı genellikle daha doğrudan ve etkilidir.",
  "suggestions": [
    "Cümledeki eylemi kimin/ne yapDidini belirleyin ve aktif çatı kullanın.",
    "Edilgen ifadeyi kaldırıp daha kısa ve net bir cümle kurun."
  ],
  "occurrences": [
    {
      "startIndex": 400,
      "endIndex": 420,
      "snippet": "bir rapor sunuldu."
    }
  ]
}

// Example 4: Filler Words
{
  "id": "trope-filler-004",
  "name": "Doldurucu Kelimeler/İfadeler",
  "description": "'Yani', 'şey', 'aslında', 'gibi' gibi gereksiz kelimeler, metnin akıcılığını bozar ve konuşma diline özgü bir izlenim bırakabilir.",
  "suggestions": [
    "Bu kelimeleri cümleden çıkarın.",
    "Cümlenin anlamını netleştirmek için yeniden yapılandırın."
  ],
  "occurrences": [
    {
      "startIndex": 510,
      "endIndex": 525,
      "snippet": "yani, bu durum..."
    }
  ]
}

// Example 5: Lack of Specificity
{
  "id": "trope-lack-spec-005",
  "name": "Belirsizlik / Özgünlük Eksikliği",
  "description": "Soyut ve genel ifadeler kullanmak ('iyi bir deneyim', 'önemli bir gelişme'), metni sıradanlaştırır. Daha spesifik örnekler ve veriler kullanmak metni zenginleştirir.",
  "suggestions": [
    "Mümkünse sayılar, istatistikler veya somut örnekler ekleyin.",
    "Daha net ve tanımlayıcı sıfatlar veya fiiller kullanın."
  ],
  "occurrences": [
    {
      "startIndex": 600,
      "endIndex": 620,
      "snippet": "oldukça iyi bir sonuç elde edildi"
    }
  ]
}
```

## 10. DEPLOYMENT NOTES:

*   **Build Command:** Use the build command provided by Vite (e.g., `npm run build` or `yarn build`). This will generate an optimized static `dist` folder.
*   **Environment Variables:** If an API endpoint is used for analysis in the future, manage the API URL using environment variables (e.g., `VITE_API_URL`). These should be configured in the deployment platform's settings.
*   **Routing:** For a single-page application, configure the hosting provider (Netlify, Vercel) to handle client-side routing. This typically involves redirecting all non-file requests to `index.html`.
*   **Performance Optimizations:**
    *   Leverage code splitting if the application grows beyond a single page.
    *   Optimize image assets (if any).
    *   Ensure efficient state management to prevent unnecessary re-renders.
    *   Use `React.memo` or `useCallback` where appropriate.
    *   Regularly analyze bundle size using tools like `vite-plugin-visualizer`.
*   **HTTPS:** Ensure the deployment uses HTTPS for secure communication, especially if handling sensitive text inputs (though the MVP focuses on local analysis).
*   **Favicon & PWA:** Consider adding a favicon and basic PWA manifest for a more professional look and feel.