Blog AI Summary and Optimization

Why Do We Need AI Summaries#

I can't remember clearly, but I remember studying a text in middle school about how to read newspapers. I have always maintained the reading habits introduced in the text. For content that doesn't require careful reading, I can skim through it. Now, after ChatGPT became popular, there are many applications, and the AI summary plugin has been very helpful to me. After information overload, we are bombarded with a lot of low-value information, and such plugins allow me to quickly determine whether an article is worth reading in detail. After comparing multiple options, I chose "ChatGPT Summary Assistant - Chrome Web Store" as my preferred plugin when browsing web pages. Its usage effect is as shown in the image below:

chatgpt_summary

Is AI Summary Necessary?#

Not necessary!

I integrated AI summaries just to facilitate people who have the same reading habits as me. My personal blog is about recording life and writing some memos, which are all low-value data for others.

I have now integrated the AI summary function on my blog because I am using TianliGPT. At that time, out of a sense of "supporting independent developers," I purchased TianliGPT's service. I found that the purchased key was quickly used up, so I bought another key and found that it was still not enough, so I bought another key. Even so, less than two-thirds of the articles on my blog have AI summaries. In this way, it feels like a bottomless pit. At this time, the AI summary function has become a historical burden. If I cancel the AI summary function, the small amount of money I spent earlier will become a sunk cost.

Having sentiment does not mean compromising the geek spirit. So I decided to transform the AI summary myself. This also conforms to the original intention of switching to Hugo static blog, trying to staticize as much data as possible. Try to make the page data SSG (Static-Site Generation) / SSR (Server-Side Rendering).

How to Optimize AI Summaries#

Recommended: https://github.com/Moraxyc/ai-summary-hugo Python script to assist in generating summary.json

1. Method#

There are 2 ways to store AI summaries locally:

Save the AI summaries in .json files under the data directory

data_summary_json

Put the summary results in the Front Matter of the article .md file

summary_frontmatter

2. Data Format#

I chose method 1, which is to put all AI summaries in a .json file, which is convenient for later maintenance and does not disrupt existing articles. Data sources:

AI summaries generated by TianliGPT
Summaries obtained from ChatGPT and Claude2 through scripts

I now use several scripts to obtain summaries, and there is no perfect script that can handle this job, so I won't paste the script here. The summary of TianliGPT can be found by pressing F12 to open DevTools on the webpage:

tianligpt_response

After consolidating the AI summaries obtained in various ways, generate a summary.json file. Create a new file data/summary/summary.json in the data directory, and copy all the data into it. The data format is as follows:

{
  "summaries": [
    {
      "title": "Snow Scene on December 15, 2010",
      "slug": "snows",
      "generated": true,
      "summary": "The article describes the snow scene the author experienced on December 15, 2010. The author mentions that before it snowed, the sky was only a few scattered white spots, and no one expected it to snow so heavily. The author believes that there may be heavier snowfall in his hometown. The article also mentions issues related to address settings and program errors, and ends with the Digital Garden Power Generation with Love. "
    },
    {
      "title": "Goodbye 2010, Hello 2011",
      "slug": "goodbye2010",
      "generated": true,
      "summary": "The article tells about the author's review of 2010 and expectations for 2011. He believes that he has been living too much for others in the past year and has lost himself. He hopes that the new year will be more positive and sunny, and regards experiences and insights as wealth. Finally, he expresses his wish for a happy new year without telling stories of suffering. "
    }
    ]
}

The generated field is a judgment word for my personal use and is optional. title and slug are used to correspond to the anchors of the articles.

3. Rendering AI Summaries#

To render the AI summaries from the summary.json file at the beginning of each article, modify the Hugo article template file. The template files may vary depending on the theme, but they are similar. Generally, the template file is named single.html and is located in the layouts directory of the theme or the layouts directory of the Hugo root directory. For example, the template for the DoIt theme is located at themes/DoIt/layouts/posts/single.html. I copied it to the root directory layouts/posts/single.html, and same-name templates take precedence in rendering the root directory. Insert the following code before {{ .Content }} in the article template single.html:

<!-- Other code -->

<!-- Get the data -->
{{ $summary := getJSON "data/summary/summary.json" }}

<!-- Use slug as an anchor to correspond to the article and summary -->
{{ $currentSlug := .Params.slug }}
{{ $matchingSummary := index (where $summary.summaries "slug" $currentSlug) 0 }}

<div class="post-ai">
    <div class="ai-title">
        <i class="fas fa-robot ai-title-icon"></i>
        <div class="ai-title-text">AI Summary</div>
    </div>

    <!-- Typeit Typewriter Effect -->
    <!-- <div id="ai-explanation" class="ai-explanation"></div> -->

    <div class="ai-explanation ai-explanation-content">
        {{ if $matchingSummary.summary }}
            {{ $matchingSummary.summary }}
        {{ else }}
            AI summary interface temporarily unavailable...
        {{ end }}
    </div>
</div>

<!-- Render the document content -->
{{ .Content }}

<!-- Other code -->

If you don't need the typewriter effect, the above content is already usable.

If you need the typewriter effect, uncomment <div id="ai-explanation" class="ai-explanation"></div>. Add display: none to <div class="ai-explanation-content" style="display: none;"> to hide it, as its purpose is only to assign values to the Typeit plugin. Add the following JS:

<script src="https://unpkg.com/[email protected]/dist/index.umd.js"></script>

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Get the value from .ai-explanation-content
    const matchingSummary = document.querySelector(".ai-explanation-content").textContent;

    new TypeIt("#ai-explanation", {
        strings: matchingSummary,
        speed: 50,
        lifeLike: true,
        waitUntilVisible: true,
    }).go();
});
</script>

4. Simple CSS#

.post-ai {
    background: #f5f5f5;
    border-radius: 0.5rem;
    padding: 0.5rem;
    line-height: 1.3;
    border: 1px solid #cfe6f3;
    margin: 1rem 0;
}

.ai-title {
    display: flex;
    color: #2d96bd;
    border-radius: 0.5rem;
    align-items: center;
    padding: 0 0.25rem;
    cursor: default;
    user-select: none;
}

.ai-title-icon {
    width: 20px;
    height: auto;
    margin-right: 0.25rem;
}

.ai-title-text {
    font-weight: bold;
    margin-left: 0.25rem;
    line-height: 1;
}

.ai-explanation {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: #fff;
    border-radius: 0.5rem;
    border: 1px solid #cfe6f3;
    font-size: 0.95rem;
    line-height: 1.4;
    display: inline-block;
    width: 100%;
}

.ai-explanation span {
    margin-left: 0.5rem;
}

/* .ai-explanation-content {
    display: none !important;
} */